【web可视化】canvas常用api总结

canvas基础图形绘制完整笔记代码http://t.csdn.cn/tssed

Canvas标签

1. <canvas></canvas>渲染画图（默认画布大小宽300*高500）

2. <canvas width="300" height="500">

• 通过width、height属性调整宽高

• 不能使用css样式修改，因为使用css不会增加像素点，只会将原有的像素点扩大

Canvas常用api

1. moveTo()：设置绘制起点

• ctx.moveTo(x,y)

• 设置上下文绘制起点，相当于移动画笔至某个位置

• 绘制必须先设置起点，否则不生效

2. lineTo()：绘制直线

• ctx.lineTo(x,y)

• 从x,y位置绘制一条直线到起点或者上一个线头点

• (x,y)线头点坐标

3. stroke()：描边

• ctx.stroke(x,y)

• 根据路径绘制直线，将直线绘制出来必须执行stroke()

4. fill()：填充

• ctx.fill()

• 将闭合路径的内容填充成具体的颜色（默认为黑色）

• 如果描点没有构成封闭结构、也会自动构成一个封闭图形

5. lineWidth：设置线宽

• ctx.lineWidth = xx

• 设置或返回当前的线条宽度，沿着起始坐标往上下两边扩展

6. fillStyle：设置或返回用于填充的颜色

• ctx.fillStyle= 'color'

7. strokeStyle：设置或返回用于描边的颜色

• ctx.strokeStyle= 'color'

8. closePath():闭合路径

• ctx.closePath()

• 从当前的终点连一条路径至起点，让整个路径闭合

9. beginPath()：开始路径

• ctx.beginPath()

• 画图之前先调用ctx.beginPath()

10. rect()：快速绘制矩形

• ctx.rect(x,y,width.height)

• x,y是矩形上的左上角坐标，width和height都是以像素

• rect方法只是规划了矩形路径，并可以填充和描边

11. ctx.strokeRect(x,y,width,height)直接进行stroke绘制，不会产生路径

12. ctx.fillRect(x,y,width,height)直接进行填充绘制，不会产生路径

13. clearRect(x,y,width,height)清除矩形

14. ctx.drawImage(img,x,y) 绘制的图片

• ctx.drawImage(图片对象,x位置,y位置)

• ctx.drawImage(img,x,y,sWidth,sHeight)

• sWidth,sHeight表示绘制图片的大小

• ctx.drawImage(图片对象,x位置,y位置，宽度，高度)

• ctx.drawImage(img,x,y,sWidth,sHeight,x,y,width,height)

• x,y,sWidth,sHeight 表示从图片的哪个位置截取多大的图片

• x,y,width,height表示会知道画布的哪个地方，以及绘制大小

• ctx.drawImage(图片对象,图像裁剪的x位置,图像裁剪的y位置，裁剪的宽度，裁剪的高度,x位置,y位置,宽度,高度)

<canvas id="canvas1" width="600" height="600"></canvas>

let canvas = document.quertySelector("#canvas1");
let ctx = canvas.getContext('2d');
let img = new Image();
img.src = "*****url";
img.onload = function(){
    ctx.drawImage(img, 0, 0);
}