-
圓心位置在最有
//?context.arc(x,?y,?radius,?startAngle,?endAngle,?anticlockwise);
查看全部 -
狀態(tài)設(shè)置 和 繪制,現(xiàn)有狀態(tài),在去繪制
moveTo,把一直筆放到了 這個位置
lineTo 滑到那個位置
原點的位置 是左上角 向左-> 向下??
查看全部 -
? ? ? // canvas繪制是基于狀態(tài)進行繪制的;
? ? ? //1. 定義路徑context.moveTo(0,0)context.lineTo(200, 200)
? ? ? //2. 定義多個路徑,使用context.beginPath() context.closePath()分割
? ? ? //3. 使用context.lineWidth context.strokeStyle context.fillStyle 設(shè)置線段的寬度,線段顏色,填充顏色
? ? ? //4. 使用 contxt.stroke()繪制線段;使用context.fill()填充顏色
查看全部 -
哈哈,畫了一個沒什么用的圓
window.onload?=?function?()?{ ????const?canvas?=?document.getElementById("canvas") ????const?context?=?canvas.getContext('2d') ????context.lineWidth?=?6 ????const?count?=?100 ????let?p?=0 ????let?n?=0.12?*?Math.PI ????for?(let?i?=?0;?i?<=?count;?i++)?{ ????????const?r?=?Math.floor(Math.random()?*?255) ????????const?g?=?Math.floor(Math.random()?*?255) ????????const?b?=?Math.floor(Math.random()?*?255) ????????const?c?=?`#${r.toString(16)}${g.toString(16)}${b.toString(16)}000` ????????context.beginPath() ????????context.arc(330,?300,?200,?p?,?n,) ????????context.strokeStyle?=?c.slice(0,?7) ????????p?=??n ????????n?=2?*?Math.PI*(i+1)/count ????????context.stroke() ????} }
查看全部 -
11111111111111111111111111111
查看全部 -
111111111111
查看全部 -
2222222222222222222222
查看全部 -
2222222222222222222222
查看全部 -
創(chuàng)建canvas筆記 :
查看全部 -
111111111111111111
查看全部 -
動畫?
更加精確的動畫?
查看全部 -
碰撞檢測查看全部
-
總結(jié)-Context
查看全部 -
Render a digit原理圖
查看全部 -
接上次……
查看全部 -
canvas html base
查看全部 -
數(shù)字顯示原理
查看全部 -
arc多例效果
查看全部 -
arc代碼2
查看全部 -
arc代碼例子
查看全部 -
Draw an arc
查看全部 -
Draw an arc
查看全部 -
Draw復(fù)習(xí)
查看全部 -
繪制兩個圖形的代碼
查看全部 -
繪制三角形
查看全部 -
Canvas基本代碼
查看全部
舉報