JS canvas画图

Posted yxtfs17

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS canvas画图相关的知识,希望对你有一定的参考价值。

1. 获取canvas对象的画笔。

  document.getElementById(" ID名 ").getContext(‘ 2d ‘);

2. 设置画笔属性。

  .lineWidth = 5;   设置划线宽度为5像素。

  .strokeStyle = "rgb(250,255,20);    设置画线颜色。

  .fillStyle = "red"    设置填充颜色。

3. 画矩形

  .strokeRect(x, y, w, h);     画矩形框

  .fillRect(x, y, w, h);            画矩形面

4. 路径画图。

  .beginPath()                 开始路径定义

  .closePath()                 闭合路径(使首尾相连)

  .fill()                              填充

  .stroke()                       划线

 

  .moveTo(x, y)              移动画笔到(x,  y)

  lineTo(x, y)                  从当前位置划线至(x, y)

  arc(x, y, r, s, e, b)        画弧(xy坐标,r半径, s e开始与结束角度, b 划线方向 true为逆时针)

5. 清除画面内容。

  .clearRect(x,y,w,h)      擦除矩形中的内容

 

以上是关于JS canvas画图的主要内容,如果未能解决你的问题,请参考以下文章

关于使用canvas画图时,图片被拉伸的问题

JS canvas画图

h5 canvas 画图

js中的canvas画图,clearrect清除画布之后,重绘页面空白,重绘不出来,但没报错,js方法正常执行。

一个自定义View中canvas画图的问题

canvas 2D绘图