最近在学习canvas,canvas有很强大的图像处理功能,下面写一个我的学习总结:
canvas常用功能:
1. 绘制矩形、圆形、曲线、组合图形
2. 绘制文本
3.绘制渐变、变形的图形
4. 图片处理功能:绘制图片到画布、裁剪图片、
步骤:
1.在html中新增canvas元素,建议在canvas元素中设置width和height
2.编写js代码(需要在onload时调用绘制图形的函数):
2.1 获取画布
2.2 获取画笔:图像上下文、封装了图像绘制功能的对象,目前只支持2d
2.3 设置图像样式:填充样式(fillStyle)和边框样式(strokeStyle)
2.4 指定线宽:lineWidth
2.5 图像变形:平移translate(x,y)、缩放scale(x,y)、旋转rotate(rangle)
2.6 填充(fill)与绘制边框(stroke)
示例:
1.绘制矩形
Examples
运行图像:
2.操作图像
火狐浏览器第一次打开时可能报错:NS_ERROR_NOT_AVAILABLE,运行后刷新浏览器即可
Canvas_Image Canvas 处理图像
运行图像: