canvas绘图动态效果
2015-07-12 08:54
495 查看
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>
相关文章推荐
- 标题类型-整型
- ACM配置指南
- mysql储存过程以及定时调度清除数据
- 转 如何使用JEE6快速开发简单的webservice
- 零售光盘版Win10曝光:仍提供U盘安装介质
- 黑马程序员_面向对象总结
- POJ 3026 Borg Maze(bfs+最小生成树-Prim)
- 三期_day12_其他+jetty的使用
- DOCTYPE
- MyEclipse移动开发教程:移动Web模拟器指南(一)
- Android SDK_API_开发包_离线包_下载 (2014-11版)
- 表上的DELETE操作
- ACM牛人博客
- Tachyon:Spark生态系统中的分布式内存文件系统
- LeetCode Summary Ranges
- classpath和路径
- C++设计模式--观察员
- db2 常用命令
- xml.etree.ElemnetTree中root.iter()的使用
- 一个简单的Tcp客户端