canvas

最新推荐文章于 2024-11-29 18:03:35 发布

Vanqqqq

最新推荐文章于 2024-11-29 18:03:35 发布

阅读量410

点赞数

分类专栏： web 文章标签： web

web 专栏收录该内容

33 篇文章

订阅专栏

江湖上流传开来的除了牛叉的"H5"，还有牛叉的canvas应用。

canvas是html5的一部分，当然他们说的H5也并不是html5的意思，只是表示在手机浏览器中，更侠义的是在微信浏览器中打开的酷炫的网页。

曾几何时，我也觉得canvas真的酷爆了，各种什么烟花、酷炫的动画效果、canvas游戏等，都燃烧着我学习的热情。

后来通过学习，多看书，其实canvas并不复杂，要用到的东西也不多。

大概整理一下：

1、绘制基本几何图形

（1）直线

[javascript]view plaincopy 
   
 ctx.moveTo(100,200);  
 ctx.lineTo(120,300);  
 ctx.lineWidth = 10;  
 ctx.strokeStyle = '#000';  
 ctx.stroke();  

（2）矩形

[html]view plaincopy 
   
 ctx.fillRect(0,0,100,100);  

（3）圆形

[javascript]view plaincopy 
   
 ctx.arc(200,200,100,0,Math.PI*(1/2),false);     //x,y,半径，起始角度，结束角度，是否逆时针方向  
 ctx.stroke();  

（4）三角形（用直线来连接实现）

[javascript]view plaincopy 
   
 ctx.moveTo(400,200);  
 ctx.lineTo(350,260);  
 ctx.lineTo(450,260);  
 ctx.lineTo(400,200);  
 ctx.lineWidth = 5;  
 ctx.strokeStyle = 'blue';  
 ctx.fillStyle = 'orange';  
 ctx.stroke();  
 ctx.fill();  

（5）曲线

[javascript]view plaincopy 
   
 ctx.lineWidth = 2;  
 ctx.strokeStyle = "#f00";  
 ctx.moveTo(10,10);  
 ctx.arcTo(210,60,10,210,20);  
 ctx.stroke();  

（6）二次贝塞尔曲线

[javascript]view plaincopy 
   
 ctx.lineWidth = 3;  
         ctx.strokeStyle = 'blue';  
         ctx.moveTo(100,100);  
         ctx.quadraticCurveTo(125,225,225,166);  
         ctx.stroke();  

（7）三次贝塞尔曲线

[javascript]view plaincopy 
   
 ctx.moveTo(20,20);  
 ctx.bezierCurveTo(20,100,200,100,200,20);  

以上是基本的几何图像绘制方法，虽然简单，但是只要创意好，利用简单的几何图形来组合成复杂的图像，也是很棒的撒。

2、添加图片

有三种画法，函数方法一样，只是参数不同，更多的参数表示更复杂也更多可控制的东西。

[javascript]view plaincopy 
   
 var img = new Image();  
         img.src = '1.jpg';  
         img.onload = function(){  
             //第一种画法  
             ctx.drawImage(img,0,0);  
   
             //第二种画法,5 args  
             ctx.drawImage(img,330,0,200,300);  
   
             //第三种画法，9 args  
             ctx.drawImage(img,0,0,320,384,330,320,160,192);  
         }  

3、绘制文字

[javascript]view plaincopy 
   
 ctx.font="20px Georgia";  
 ctx.fillText("Hello World!",10,50);  

除了使用fillText还可以strokeText，可同时使用之前绘制图形的一些常用方法，比如strokeStyle等。

4、转换（缩放，位移，旋转）

例子：旋转一个矩形

[javascript]view plaincopy 
   
 var mycanvas = document.getElementById('mycanvas'),  
             ctx = mycanvas.getContext('2d'),  
             cw = mycanvas.width,  
             ch = mycanvas.height,  
             rw = 100,  
             rh = 50,  
             degree = 0;  
   
           
         setInterval(function(){  
             ctx.clearRect(0,0,cw,ch);  
             ctx.save();  
             ctx.translate(300,300);  
             ctx.rotate(Math.PI/180*(degree++));  
             ctx.fillStyle = '#999';  
             ctx.fillRect(-rw/2,-rh/2,rw,rh);  
             ctx.restore();  
   
         },10);  

5、样式、阴影

设置阴影大小、颜色、偏移量

[javascript]view plaincopy 
   
 ctx.shadowBlur=20;  
 ctx.shadowColor="black";  
 ctx.shadowOffsetX = "10";  
 ctx.shadowOffsetY = "20";  

创建并使用线性渐变：

[javascript]view plaincopy 
   
 var grd=ctx.createLinearGradient(0,0,170,0);  
 grd.addColorStop(0,"black");  
 grd.addColorStop(1,"white");  
   
 ctx.fillStyle=grd;  
 ctx.fillRect(20,20,150,100);  

创建并使用径向渐变：

[javascript]view plaincopy 
   
 var grd=ctx.createRadialGradient(75,50,5,90,60,100);  
 grd.addColorStop(0,"red");  
 grd.addColorStop(1,"white");  
   
 ctx.fillStyle=grd;  
 ctx.fillRect(10,10,150,100);  

使用背景图片，和css一样，可以设置平铺等属性

[javascript]view plaincopy 
   
 var img=document.getElementById("lamp");  
 var pat=ctx.createPattern(img,"repeat");  
 ctx.rect(0,0,150,100);  
 ctx.fillStyle=pat;  
 ctx.fill();  