canvas基础图形绘制完整笔记代码http://t.csdn.cn/tssed
Canvas标签
<canvas></canvas>渲染画图(默认画布大小宽300*高500)
<canvas width="300" height="500">
通过width、height属性调整宽高
不能使用css样式修改,因为使用css不会增加像素点,只会将原有的像素点扩大
Canvas常用api
moveTo():设置绘制起点
ctx.moveTo(x,y)
设置上下文绘制起点,相当于移动画笔至某个位置
绘制必须先设置起点,否则不生效
lineTo():绘制直线
ctx.lineTo(x,y)
从x,y位置绘制一条直线到起点或者上一个线头点
(x,y)线头点坐标
stroke():描边
ctx.stroke(x,y)
根据路径绘制直线,将直线绘制出来必须执行stroke()
fill():填充
ctx.fill()
将闭合路径的内容填充成具体的颜色(默认为黑色)
如果描点没有构成封闭结构、也会自动构成一个封闭图形
lineWidth:设置线宽
ctx.lineWidth = xx
设置或返回当前的线条宽度,沿着起始坐标往上下两边扩展
fillStyle:设置或返回用于填充的颜色
ctx.fillStyle= 'color'
strokeStyle:设置或返回用于描边的颜色
ctx.strokeStyle= 'color'
closePath():闭合路径
ctx.closePath()
从当前的终点连一条路径至起点,让整个路径闭合
beginPath():开始路径
ctx.beginPath()
画图之前先调用ctx.beginPath()
rect():快速绘制矩形
ctx.rect(x,y,width.height)
x,y是矩形上的左上角坐标,width和height都是以像素
rect方法只是规划了矩形路径,并可以填充和描边
ctx.strokeRect(x,y,width,height)直接进行stroke绘制,不会产生路径
ctx.fillRect(x,y,width,height)直接进行填充绘制,不会产生路径
clearRect(x,y,width,height)清除矩形
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);
}