认识Canvas三

绘制图片

创建图片

1
2
3
4
5
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. 状态的保存与恢复

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

×

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

扫码支持
扫码打赏,你说多少就多少

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

文章目录
  1. 1. 绘制图片
    1. 1.0.1. 创建图片
  2. 1.1. drawImage(图片对象,x,y)
  3. 1.2. drawImage(图片对象,x,y,width,height)
  4. 1.3. drawImage(图片对象,sx,sy,sw,sh,x,y,width,height)
  • 2. 变换
    1. 2.1. ctx.translate(x,y):平移变换
    2. 2.2. rotate(radian):旋转变换
    3. 2.3. scale():伸缩变换
    4. 2.4. 4. 状态的保存与恢复