canvas绘图动态效果

来源：互联网发布：淘宝开店充话费编辑：程序博客网时间：2024/04/28 15:58

Canvas学习（二）

一、变形(基本思想都是先移动画布，在绘画)

1) 缩放scale()

//缩放scale()

ctx.strokeRect(20,20,100,100);

ctx.scale(3,3);//相当于画布放大了三倍，所以起始坐标都放大了三倍,必须两个参数

ctx.beginPath();

ctx.strokeRect(20,20,100,100);

ctx.scale(0.2,0.2);//会根据上一个的画布大小来缩放，很重要

ctx.beginPath();

ctx.strokeRect(20,20,100,100);

2) 平移translate()

//平移translate()

ctx.strokeRect(20,20,100,100);

ctx.beginPath();

ctx.translate(150,0);//相当于画布移动了这些距离

ctx.lineWidth=10;

ctx.strokeRect(20,20,100,100);

3) 旋转rotate（）

//旋转rotate()

ctx.strokeRect(20,20,100,100);

ctx.beginPath();

ctx.rotate(-20*Math.PI/180);//相当于画布根据原点旋转

ctx.lineWidth=10;

ctx.strokeRect(20,20,100,100);

//如果想要围绕原点旋转，则先移动画布

ctx.strokeRect(20,20,100,100);

ctx.beginPath();

ctx.translate(20,20);

ctx.rotate(-20*Math.PI/180);//相当于画布根据原点旋转

ctx.lineWidth=10;

ctx.strokeRect(20,20,100,100);

4) 倾斜setTransform()

//倾斜 setTransform

ctx.strokeRect(20,20,100,100);

ctx.beginPath();

ctx.setTransform(1,10/200,-60/100,1,100,10);

ctx.lineWidth=10;

ctx.strokeRect(20,20,100,100);

5) 综合transform（）

二、图形渲染

1) 渐变

//颜色线性渐变需createLinearGradient(0,0,200,200)和addColorStop(0.5,'#39f')结合使用

var runm=ctx.createLinearGradient(0,0,200,200);

runm.addColorStop(0.5,'#39f');

runm.addColorStop(0.8,'purple');

ctx.fillStyle=runm;

ctx.fillRect(0,0,200,200);

//颜色径向渐变需要 createRadialGradient(开始圆的圆心坐标及半径，结束圆的圆心坐标以及半径共六个参数)和addColorStop()使用

var radio=ctx.createRadialGradient(100,100,0,100,100,60)

radio.addColorStop(0,"#39f");

radio.addColorStop(1,"purple");

ctx.fillStyle=radio;

ctx.fillRect(0,0,400,400);

2) 颜色合成层叠

//颜色合成globalCompositeOperation属性

ctx.fillStyle='red';

ctx.fillRect(0,0,100,100);

//重叠处理方式

ctx.globalCompositeOperation='copy';//只绘制新图形，删除其他所有内容

ctx.globalCompositeOperation='darker';//在重叠部分，有两个图形像素相减后决定

ctx.globalCompositeOperation='destination-atop';//以前的图形不重合的部分会被清除，重叠部分会显示在新画图形的前边

ctx.globalCompositeOperation='destination-in';//只保留重合部分

ctx.globalCompositeOperation='destination-out';//新图形会剪切以前的，并清除

ctx.globalCompositeOperation='destination-over';//新画的图形在以前图形的后边

ctx.globalCompositeOperation='lighter';//重合部分颜色有两个图形颜色值相加得到

ctx.globalCompositeOperation='source-atop';//只显示以前图像覆盖的区域

ctx.globalCompositeOperation='source-in';//只显示以前图像覆盖的区域

ctx.globalCompositeOperation='source-out';//新图形不重叠的地方才有

ctx.globalCompositeOperation='source-over';//默认值

ctx.globalCompositeOperation='xor';//重合部分不显示

//画圆

ctx.beginPath();

ctx.fillStyle='green';

ctx.arc(100,100,50,0,360*Math.PI/180,true);

ctx.fill();

3) 颜色反转

//颜色反转

var img=ctx.getImageData(0,0,200,200);

var pixed=img.data;

for(var i= 0,n=pixed.length;i<n;i+= 4){

poxed[i]=255-pixed[i];

poxed[i+1]=255-pixed[i+1];

poxed[i+2]=255-pixed[i+2];

}

//重新绘制

ctx.putImageData(img,250,0);

4) 灰度控制

5) 阴影效果

//阴影效果

ctx.shadowColor='gray';

ctx.shadowOffsetX=20;

ctx.shadowOffsetY=20;

ctx.shadowBlur=10;

var img=new Image();

img.src='asd.jpg';

img.onload=function(){

ctx.drawImage(img,0,0);

}

三、自定义画板

源码：

window.onload=function(){

var a=document.getElementById("can");

//检测a.getContext()

//alert(a.getContext);

if(a.getContext){

var ctx= a.getContext('2d');

var arr=['red','green','purple','black','yellow','#39f'];

//画笔样式

ctx.lineWidth=1;

ctx.strokeStyle="red";

//缩放scale()

/*ctx.strokeRect(20,20,100,100);

ctx.scale(3,3);//相当于画布放大了三倍，所以起始坐标都放大了三倍,必须两个参数

ctx.beginPath();

ctx.strokeRect(20,20,100,100);

ctx.scale(0.2,0.2);//会根据上一个的画布大小来缩放，很重要

ctx.beginPath();

ctx.strokeRect(20,20,100,100);*/

//平移translate()

/*ctx.strokeRect(20,20,100,100);

ctx.beginPath();

ctx.translate(150,0);//相当于画布移动了这些距离

ctx.lineWidth=10;

ctx.strokeRect(20,20,100,100);*/

//旋转rotate()

/*ctx.strokeRect(20,20,100,100);

ctx.beginPath();

ctx.rotate(-20*Math.PI/180);//相当于画布根据原点旋转

ctx.lineWidth=10;

ctx.strokeRect(20,20,100,100);*/

//如果想要围绕原点旋转，则先移动画布

/* ctx.strokeRect(20,20,100,100);

ctx.beginPath();

ctx.translate(20,20);

ctx.rotate(-20*Math.PI/180);//相当于画布根据原点旋转

ctx.lineWidth=10;

ctx.strokeRect(20,20,100,100);*/

//倾斜 setTransform

/*ctx.strokeRect(20,20,100,100);

ctx.beginPath();

ctx.setTransform(1,10/200,-60/100,1,100,10);

ctx.lineWidth=10;

ctx.strokeRect(20,20,100,100);*/

//颜色线性渐变需要createLinearGradient(0,0,200,200)和addColorStop(0.5,'#39f')结合使用

/*var runm=ctx.createLinearGradient(0,0,200,200);

runm.addColorStop(0.5,'#39f');

runm.addColorStop(0.8,'purple');

ctx.fillStyle=runm;

ctx.fillRect(0,0,200,200);*/

//颜色径向渐变需要 createRadialGradient(开始圆的圆心坐标及半径，结束圆的圆心坐标以及半径共六个参数)和addColorStop()使用

/*var radio=ctx.createRadialGradient(100,100,0,100,100,60);

radio.addColorStop(0,"#39f");

radio.addColorStop(1,"purple");

ctx.fillStyle=radio;

ctx.fillRect(0,0,400,400);*/

//颜色合成globalCompositeOperation属性

/*ctx.fillStyle='red';

ctx.fillRect(0,0,100,100);

//重叠处理方式

ctx.globalCompositeOperation='copy';//只绘制新图形，删除其他所有内容

ctx.globalCompositeOperation='darker';//在重叠部分，有两个图形像素相减后决定

ctx.globalCompositeOperation='destination-atop';//以前的图形不重合的部分会被清除，重叠部分会显示在新画图形的前边

ctx.globalCompositeOperation='destination-in';//只保留重合部分

ctx.globalCompositeOperation='destination-out';//新图形会剪切以前的，并清除

ctx.globalCompositeOperation='destination-over';//新画的图形在以前图形的后边

ctx.globalCompositeOperation='lighter';//重合部分颜色有两个图形颜色值相加得到

ctx.globalCompositeOperation='source-atop';//只显示以前图像覆盖的区域

ctx.globalCompositeOperation='source-in';//只显示以前图像覆盖的区域

ctx.globalCompositeOperation='source-out';//新图形不重叠的地方才有

ctx.globalCompositeOperation='source-over';//默认值

ctx.globalCompositeOperation='xor';//重合部分不显示

//画圆

ctx.beginPath();

ctx.fillStyle='green';

ctx.arc(100,100,50,0,360*Math.PI/180,true);

ctx.fill();*/

//颜色反转

/*var img=ctx.getImageData(0,0,200,200);

var pixed=img.data;

for(var i= 0,n=pixed.length;i<n;i+= 4){

poxed[i]=255-pixed[i];

poxed[i+1]=255-pixed[i+1];

poxed[i+2]=255-pixed[i+2];

}

//重新绘制

ctx.putImageData(img,250,0);*/

//阴影效果

ctx.shadowColor='gray';

ctx.shadowOffsetX=20;

ctx.shadowOffsetY=20;

ctx.shadowBlur=10;

var img=new Image();

img.src='asd.jpg';

img.onload=function(){

ctx.drawImage(img,0,0);

}

</script>

1 0