HTML5读书笔记——canvas元素(续)
自定义笔画样式
canvas默认绘图颜色为黑色,若想改变形状颜色,主要通过使用以下两个属性:
- fillStyle:设置接下来所有fill操作的默认颜色;
- strokeStyle:设置接下来所有stroke操作的默认颜色。
这两个属性都可以接收有效的CSS颜色作为值,包括rgb()、rgba()以及颜色常量值。具体实现如下:
绘制图像
在绘制图像之前,首先要将图片加载至浏览器中。这里我们可以在<canvas>标签之后添加一个<img>标签如下:
<img src="plane.jpg" id="plane">
使用drawImage()方法绘制图像,主要有以下三种方式:
- drawImage(image,x,y):在画布的(x,y)处绘制图像;
- drawImage(image,x,y,width,height):在画布的(x,y)处绘制图像,并将其缩放至指定的宽度和高度;
- drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,x,y,width,height):从图片中切割出一个矩形区域(sourceX,sourceY,sourceWidth,sourceHeight),将其缩放至指定的宽度和高度,并在画布的(x,y)处绘制图像;
平移和旋转
实现平移和旋转的方法主要有以下几种:
- translate(x,y):将坐标系的原点平移至另一点(x,y);
- rotate(angle):以当前原点为中心,顺时针旋转坐标系,旋转角度为angle(弧度制);
- scale(x,y):以x和y为因子缩放坐标系。
主要流程如下:
- 将canvas原点平移至物体处;
- 以指定角度旋转画布;
- 绘制物体;
- 将画布复原至初始状态。
整体实现过程如下:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步