绘制图片
创建图片
1 2 3 4 5
| var img=document.createElement("img"); img.src=""; ------------------------------- var img=new Image(); img.src="";
|
drawImage(图片对象,x,y)
- 参数1:图片对象,参数2,3:将图片绘制在canvas中的指定位置
- 注意:需要在图片加载完成之后,才能绘制该图片
drawImage(图片对象,x,y,width,height)
- width,height:指定图片在canvas中的宽高(注意保持纵横比)
drawImage(图片对象,sx,sy,sw,sh,x,y,width,height)
- 将图片的以sx,sy点为顶点宽度为sw,高度为sh的矩形区域内的部分绘制到canvas的以x,y为顶点,宽为width,高为height的区域内
变换
ctx.translate(x,y):平移变换
- x为正数表示顶点沿着x轴向右移动,负数表示向左移动
- y为正数表示顶点沿着y轴向下移动,负数表示向上移动
- 举例:ctx.translate(100,200):坐标轴向右移动100px,向下移动200像素
rotate(radian):旋转变换
- radian是弧度为单位,
- radian为正数表示顺时针旋转指定弧度,负数表示逆时针旋转指定弧度
scale():伸缩变换
- scale(1,1):不伸缩
- scale(0.5,1):x轴压缩一倍
- scale(1,0.5):y轴压缩一倍
4. 状态的保存与恢复