H5_Node5_Canvas2_图形组合方式图像的处理
-->图形组合方式
十一种图形组合效果
-->图像的处理
绘制、保存、恢复、输出、交互
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
一、图形组合方式
图形组合：
新画图形是压在原图形上或者原图覆盖新图形等等一系列新图与原图形的结合方式叫做图形的组合，大概分为十一种方式。
比如：显示新图覆盖原图、或者只显示原图和新图相重叠部分等等。
globalCompositeOperation属性 控制图形的组合方式
这个属性归getContext(‘2d’)所创建的对象所有
globalCompositeOperation="type";
type的值：
source-over：默认值，表示新图覆盖在旧图之上
source-atop：只绘制旧图和重叠的部分，其他透明
source-in：只绘制新图的重叠部分，其他透明
source-out：只绘制新图，重叠部分和旧图透明
destination-over：表示旧图覆盖在新图之上
destination-atop：只绘制新图和重叠的部分，其他透明
destination-in：只绘制旧图的重叠部分，其他透明
destination-out：只绘制旧图，重叠部分和新图透明
lighter：旧图与新图都绘制，重叠部分混色处理
xor：旧图和新图重叠处做透明处理
copy：只绘制新图形，不绘制旧图形
canvas-图形组合方式
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
二、图像的处理
绘制图像：把图片绘制在画布上面
drawImage(img,x,y)
img：图片
x：图片横坐标的起始值
y：图片纵坐标的起始值
绘制固定宽高的图像：
drawImage(img,x,y,w,h)
img：图片
x：图片横坐标的起始值
y：图片纵坐标的起始值
w：在画布中图片显示的宽度
h：在画布中图片显示的高度
剪切图像，在画布上定位被剪切部分：
drawImage(img,x,y,w,h,rx,ry,rw,rh)
img：图片
x、y：源图片的坐标
w、h：在源图片上裁剪的宽、高--
rx、ry：显示在画布中的坐标
rw、rh：显示在画布中的宽、高
canvas-图像处理-绘制图像(drawImage)
createPattern(img,type)
img：图片
type：repeat整个画布平铺
repeat-x/y在x/y轴方向上平铺
no-repeat不平铺
canvas-createPattern
3、图像的裁剪(配合路径使用)
clip()
配合路径使用，先绘制好路径，
然后调用clip方法；
提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。
canvas-clip
4、像素处理
getImageData(x,y,w,h)：可以获取指定区域内
的像素点的数据；
x:canvas的x轴坐标 y:canvas的y轴坐标
w:指定区域的宽度 h:指定区域的高度
putImageData(imgdata,x,y)：getImageData
返回的像素数据点imgdata填充到画布上面，从
x、y点开始填充；
PS: 服务器环境运行，不支持跨域
canvas-getImageData
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
5、图像的输出
canvas.toDataURL( type , args ):
为canvas的方法，用来返回一个url地址，将canvas画布转化为一张图像；
图像是基于Base64编码的 , 如果不指定两个参数，无参数调用该方法，转换的图像格式默认为png格式 。
type:图像格式，image/png image/jpeg等
args:可选参数。例如，如果type为image/jpeg，则args可以是0和1之间的值，以指定图像的品质。
PS: 服务器环境运行，不支持跨域
canvas-toDataURL
![]()
6、其他方法
scale(w,h) 缩放当前绘图:
w: 缩放绘图的宽度 h: 缩放绘图的高度
rotate(angle) 旋转当前绘图
1°等于Math.PI/180 5°=5*Math.PI/180
translate(x,y) 重新映射画布上的 (0,0) 位置
canvas-save和restore方法
7、save和restore方法
save()、restore():
绘制复杂图形必不可少的方法，分别用来保存、恢复canvas的状态，无参数；
三、canvas交互
isPointInPath(x , y)方法
测试给定的坐标点是否位于当前路径之内
返回 true 或 false
x : canvas的x轴坐标
y : canvas的y轴坐标
示例：
if (ctx.isPointInPath(x , y)) { };
PS: isPointInPath方法只对当前路径有效
canvas-交互
彩蛋：用图形组合写刮刮乐效果：
canvas-（图形组合）刮刮乐
谢谢惠顾!
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！