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);
}
三、自定义画板
源码：
<script>
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>
版权声明：本文为博主原创文章，未经博主允许不得转载。