canvas笔记-1

canvas笔记

构建画布

  • 在canvas上构建2D画布 let ctx = canvas.getContext("2d");

绘制一个矩形和空心的矩形

  • 在画布上绘制一个矩形 ctx.fillRect(40,40,200,200) X,Y,Width,Height
  • 在画布上绘制一个空心的矩形 ctx.strokeRect(40,40,200,200) X,Y,Width,Height

绘制一个线条

使用beginPath开始准备画路径,使用moveTo来设置绘制原点,然后调用lineTo方法设置线条的终点,在使用closePath来完成路径的绘制。最后使用stroke来绘制它的轮廓,示例:

ctx.beginPath(); // 开始准备绘制路径
ctx.moveTo(40,40); // 将画笔移动到 x:40,y:40的坐标处
ctx.lineTo(340,40); // 绘制 x:40-340 y:40的线,这是一条横线
ctx.closePath(); // 结束绘制
ctx.stroke(); // 将线绘制出来

使用ctx.lineWidth来控制线条的粗细;

绘制一个圆

绘制圆和绘制线条类似,但是没用到画笔,就像圆规一样。

ctx.beginPath(); // 开始准备绘制路径
ctx.arc(40,40,80,0,Math.PI*2,false); // 将画笔移动到40,40处,绘制一个半径80,角度从0以顺时针开始的到Math*2即一个满圆的圆环
ctx.closePath(); // 结束绘制
ctx.stroke(); // 将线绘制出来

- arc参数:x, y, radius(半径), startAngle(开始角度), endAngle(结束角度), anticlockwise(逆时针方向,如果圆弧逆时针绘制,那么它为true);

stroke和fill

  • stroke为绘制线条,如strokeRect绘制一个矩形的线条,即空心
  • fill为填充, 如fillRect填充一个矩形的内容,即实心
  • 设置颜色strokeStylefillStyle

擦除canvas

ctx.clearRect(X, Y, W, H),此方法会擦除选定范围得像素

分享 二维码
分类:代码笔记
标签:
还没有评论


在此输入评论..
0/100