认识Canvas三

绘制图片

创建图片

var img=document.createElement("img");
img.src="";
-------------------------------
var img=new Image();
img.src="";

drawImage(图片对象,x,y)

1. 参数1：图片对象，参数2，3：将图片绘制在canvas中的指定位置
2. 注意：需要在图片加载完成之后，才能绘制该图片

drawImage(图片对象,x,y,width,height)

1. width,height：指定图片在canvas中的宽高（注意保持纵横比）

drawImage(图片对象,sx,sy,sw,sh,x,y,width,height)

1. 将图片的以sx,sy点为顶点宽度为sw，高度为sh的矩形区域内的部分绘制到canvas的以x,y为顶点，宽为width，高为height的区域内

变换

ctx.translate(x,y)：平移变换

1. x为正数表示顶点沿着x轴向右移动，负数表示向左移动
2. y为正数表示顶点沿着y轴向下移动，负数表示向上移动
3. 举例：ctx.translate(100,200)：坐标轴向右移动100px，向下移动200像素

rotate(radian)：旋转变换

1. radian是弧度为单位，
2. radian为正数表示顺时针旋转指定弧度，负数表示逆时针旋转指定弧度

scale()：伸缩变换

1. scale(1,1)：不伸缩
2. scale(0.5,1)：x轴压缩一倍
3. scale(1,0.5)：y轴压缩一倍

4. 状态的保存与恢复

save() //保存当前所处的状态的所有的状态值
restore() //就会恢复到上一次保存的状态的相关的值

赏

×

可以的话，我想喝杯咖啡续命

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦