canvas动态绘制旋转图片,html图片渐变切换

　　翻转、移动、平移、放大、缩小

　　XML/HTML Code复制内容到剪贴板var canvas=文档。getelementbyid(“canvas”)；如果(画布。获取上下文){ var context=canvas。获取上下文(“2d”)；//放大与缩小语境。begin path()；context . stroke style= # 000000 context . strokerect(10，10，150，100)；//放大3倍context.scale(3，3)；语境。begin path()；context . stroke style= # cccccontext . strokerect(10，10，150，100) //缩小context.scale(0.5，0.5)；语境。begin path()；context . stroke style= # cccccontext . strokerect(10，10，150，100) //翻转varimg=new image()；img。src= images/1。jpg ；img。onload=function(){ context。绘制图像(img，10，10)；context.scale(1，-1)；context.drawImage(img，0，-500)；} //平移语境。begin path()；context . stroke style= # 000000 context . strokerect(10，101，150，100)；//x移动50岁移动100 context.translate(50，100)；语境。begin path()；context . stroke style= # cccccontext . strokerect(10，10，150，100)；//旋转语境。begin path()；context . stroke style= # 000000 context . strokerect(200，50，100，50)；//默认旋转是根据0,0中心，使用翻译可以按照自己的设置的中心旋转context.translate(250，75)；context.rotate(45*Math .PI/180)；context.translate(-250，-75)；语境。begin path()；context . stroke style= # cccccontext . strokerect(200，50，100，50)；//转换矩阵语境。begin path()；context . stroke style= # 000000 context . strokerect(10，10，150，100)；context.transform(3，0，0，3，0，0)；语境。begin path()；context . stroke style= # cccccontext . strokerect(10，10，150，100)；}渐变、图像组合效果、颜色翻转

　　XML/HTML代码复制内容到剪贴板var canvas=文档。getelementbyid(“canvas”)；如果(画布。获取上下文){ var context=canvas。获取上下文(“2d”)；//线性绘制渐变vargrd=上下文。createlanegradient(0，0，200，100)；//位置必须是0.1-1.0之间的竖直，表示渐变中颜色的地点相对地位，颜色表示颜色grd.addColorStop(0.1， 00 ff 00 )；grd.addColorStop(0.8， ff 0000 )；context . fill style=grd context . fill rect(0，0，200，100)；//径向渐变var grd=上下文。createaradialgradient(100，100，10，100，100，50)；grd.addColorStop(0.1， 00 ff 00 )；grd.addColorStop(0.8， ff 0000 )；context . fill style=grd context . fill rect(0，0，200，200)；//图像组合效果语境。填充样式= # 00ff 00context.fillRect(10，10，50，50)；//新绘图//上下文。globalcompositeoperation=“source-over”；//只绘制新内容，删除其他所有内容语境。globalcompositeoperation= copy ；//图形重叠的地方，其颜色值相减后决定语境。globalcompositeoperation= darker ；//画布上已经有的内容只会载和其他图形重叠的地方保留语境。globalcompositeoperation= destination-atop ；//参考http://www。w3school。com。cn/html DOM/prop _ canvasrenderingcontext 2d _ globalcompositeoperation。ASP上下文。begin path()；语境。填充样式= # ff 0000context.arc(50，50，30，0，2 *数学.)；语境。fill()；//颜色翻转varimg=new image()；img。src= images/1。jpg ；img。onload=function(){ context。绘制图像(img，0，0，1，1)；varimgData=上下文。getimagedata(0，0，1，1)；可变像素=img数据。数据；console.log(像素);for(vari=0，n=像素.长度在；i=4){像素[i]=255像素[I]；像素[i 1]=255像素[I 1]；像素[I ^ 2]=255像素[I ^ 2]；} context.putImageData(imgData，250，0)；} }

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。