canvas 示例
canvas 2017-05-09 09:57:42

1、绘制矩形

2、绘制三角形

3、绘制笑脸 

 

1、绘制画布中的颜色，透明度，物体距离，长宽度

11.jpg

XML/HTML Code复制内容到剪贴板
  1. <canvas id="canvas" width="400" height="400"></canvas>  
  2.   
  3. <script>  
  4.     var c=document.getElementById("canvas");        //通过使用 document.getElementById() 方法来为 <canvas> 元素得到DOM对象  
  5.     if (c.getContext) {  
  6.         var ctx = canvas.getContext("2d");  
  7.   
  8.         ctx.fillStyle = "rgb(200,0,0)";             //颜色 红色  
  9.         ctx.fillRect (10, 10, 55, 50);              //红色物体，距左边的距离，距上边的距离，绘制的物体宽度，绘制的物体高度  
  10.   
  11.         ctx.fillStyle = "rgba(0, 0, 200, 0.5)";     //颜色 蓝色 + 透明度  
  12.         ctx.fillRect (30, 30, 55, 50);              //蓝色物体，距左边的距离，距上边的距离，绘制的物体宽度，绘制的物体高度  
  13.     }  
  14. </script>  

 

 2、绘制矩形

11.jpg

XML/HTML Code复制内容到剪贴板
  1. <canvas id="canvas" width="400" height="400"></canvas>  
  2.   
  3. <script>  
  4.     var c=document.getElementById("canvas");        //通过使用 document.getElementById() 方法来为 <canvas> 元素得到DOM对象  
  5.     if (c.getContext) {  
  6.         var ctx = canvas.getContext("2d");  
  7.   
  8.         ctx.fillRect(25,25,100,100);    //fillRect 绘制一个边长为100px的填充的黑色矩形 fillRect(x, y, width, height)  
  9.         ctx.clearRect(45,45,60,60);     //clearRect 清除指定矩形区域，让清除部分完全透明 clearRect(x, y, width, height)  
  10.         ctx.strokeRect(50,50,50,50);    //strokeRect 绘制一个矩形的边框 strokeRect(x, y, width, height)  
  11.     }  
  12. </script>  

fillRect()函数绘制了一个边长为100px的黑色正方形。clearRect()函数从正方形的中心开始擦除了一个60*60px的正方形，接着strokeRect()在清除区域内生成一个50*50的正方形边框。 

 

3、绘制三角形

11.jpg

XML/HTML Code复制内容到剪贴板
  1. <canvas id="canvas" width="400" height="400"></canvas>  
  2.   
  3. <script>  
  4.     var c=document.getElementById("canvas");        //通过使用 document.getElementById() 方法来为 <canvas> 元素得到DOM对象  
  5.     if (c.getContext) {  
  6.         var ctx = canvas.getContext("2d");  
  7.   
  8.         ctx.beginPath();        //beginPath() 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径  
  9.         ctx.moveTo(75,50);      //moveTo(x, y) 将笔触移动到指定的坐标x以及y上  
  10.         ctx.lineTo(100,75);     //lineTo(x, y) 绘制一条从当前位置到指定x以及y位置的直线  
  11.         ctx.lineTo(100,25);  
  12.         ctx.fill();             //fill() 通过填充路径的内容区域生成实心的图形  
  13.     }  
  14. </script>  

注意：当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。

 

4、绘制笑脸：

11.jpg 

XML/HTML Code复制内容到剪贴板
  1. <canvas id="canvas" width="200" height="200"></canvas>  
  2.   
  3. <script>  
  4.     var c=document.getElementById("canvas");        //通过使用 document.getElementById() 方法来为 <canvas> 元素得到DOM对象  
  5.     if (c.getContext) {  
  6.         var ctx = canvas.getContext("2d");  
  7.   
  8.         ctx.beginPath();                    // 新建一条路径  
  9.         ctx.arc(75,75,50,0,Math.PI*2,true); // 绘制  
  10.         ctx.moveTo(110,75);  
  11.         ctx.arc(75,75,35,0,Math.PI,false);   // 口(顺时针)  
  12.         ctx.moveTo(65,65);  
  13.         ctx.arc(60,65,5,0,Math.PI*2,true);  // 左眼  
  14.         ctx.moveTo(95,65);  
  15.         ctx.arc(90,65,5,0,Math.PI*2,true);  // 右眼  
  16.         ctx.stroke();  
  17.     }  
  18. </script>  

 

 5、

11.jpg

XML/HTML Code复制内容到剪贴板
  1. <canvas id="canvas" width="200" height="200"></canvas>  
  2.   
  3. <script>  
  4.     var c=document.getElementById("canvas");        //通过使用 document.getElementById() 方法来为 <canvas> 元素得到DOM对象  
  5.     if (c.getContext) {  
  6.         var ctx = canvas.getContext("2d");  
  7.   
  8.         // 填充三角形  
  9.         ctx.beginPath();  
  10.         ctx.moveTo(25,25);  
  11.         ctx.lineTo(105,25);  
  12.         ctx.lineTo(25,105);  
  13.         ctx.fill();  
  14.   
  15.         // 描边三角形  
  16.         ctx.beginPath();  
  17.         ctx.moveTo(125,125);  
  18.         ctx.lineTo(125,45);  
  19.         ctx.lineTo(45,125);  
  20.         ctx.closePath();  
  21.         ctx.stroke();  
  22.     }  

 

6、

11.jpg 

XML/HTML Code复制内容到剪贴板
  1. <canvas id="canvas" width="200" height="200"></canvas>  
  2.   
  3. <script>  
  4.     var c=document.getElementById("canvas");        //通过使用 document.getElementById() 方法来为 <canvas> 元素得到DOM对象  
  5.     if (c.getContext) {  
  6.         var ctx = canvas.getContext("2d");  
  7.   
  8.         for(var i=0;i<4;i++){  
  9.             for(var j=0;j<3;j++){  
  10.                 ctx.beginPath();  
  11.                 var x              = 25+j*50;               // x 坐标值  
  12.                 var y              = 25+i*50;               // y 坐标值  
  13.                 var radius         = 20;                    // 圆弧半径  
  14.                 var startAngle     = 0;                     // 开始点  
  15.                 var endAngle       = Math.PI+(Math.PI*j)/2; // 结束点  
  16.                 var anticlockwise  = i%2==0 ? false : true; // 顺时针或逆时针  
  17.   
  18.                 ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);  
  19.   
  20.                 if (i>1){  
  21.                     ctx.fill();  
  22.                 } else {  
  23.                     ctx.stroke();  
  24.                 }  
  25.             }  
  26.         }  
  27.     }  
  28. </script>  

 

 7、

11.jpg

XML/HTML Code复制内容到剪贴板
  1. <canvas id="canvas" width="200" height="200"></canvas>  
  2.   
  3. <script>  
  4.     var c=document.getElementById("canvas");        //通过使用 document.getElementById() 方法来为 <canvas> 元素得到DOM对象  
  5.     if (c.getContext) {  
  6.         var ctx = canvas.getContext("2d");  
  7.   
  8.         // 贝尔赛曲线  
  9.         ctx.beginPath();  
  10.         ctx.moveTo(75,25);  
  11.         ctx.quadraticCurveTo(25,25,25,62.5);  
  12.         ctx.quadraticCurveTo(25,100,50,100);  
  13.         ctx.quadraticCurveTo(50,120,30,125);  
  14.         ctx.quadraticCurveTo(60,120,65,100);  
  15.         ctx.quadraticCurveTo(125,100,125,62.5);  
  16.         ctx.quadraticCurveTo(125,25,75,25);  
  17.         ctx.stroke();  
  18.     }  
  19. </script>  

 

 8、

11.jpg

XML/HTML Code复制内容到剪贴板
  1. <canvas id="canvas" width="200" height="200"></canvas>  
  2.   
  3. <script>  
  4.     var c=document.getElementById("canvas");        //通过使用 document.getElementById() 方法来为 <canvas> 元素得到DOM对象  
  5.     if (c.getContext) {  
  6.         var ctx = canvas.getContext("2d");  
  7.   
  8.         //二次曲线  
  9.         ctx.beginPath();  
  10.         ctx.moveTo(75,40);  
  11.         ctx.bezierCurveTo(75,37,70,25,50,25);  
  12.         ctx.bezierCurveTo(20,25,20,62.5,20,62.5);  
  13.         ctx.bezierCurveTo(20,80,40,102,75,120);  
  14.         ctx.bezierCurveTo(110,102,130,80,130,62.5);  
  15.         ctx.bezierCurveTo(130,62.5,130,25,100,25);  
  16.         ctx.bezierCurveTo(85,25,75,37,75,40);  
  17.         ctx.fill();  
  18.     }  
  19. </script>  

 

 9、

11.jpg

XML/HTML Code复制内容到剪贴板
  1. <canvas id="canvas" width="200" height="200"></canvas>  
  2.   
  3. <script>  
  4.     var c=document.getElementById("canvas");        //通过使用 document.getElementById() 方法来为 <canvas> 元素得到DOM对象  
  5.     if (c.getContext) {  
  6.         var ctx = canvas.getContext("2d");  
  7.   
  8.         roundedRect(ctx,12,12,150,150,15);  
  9.         roundedRect(ctx,19,19,150,150,9);  
  10.         roundedRect(ctx,53,53,49,33,10);  
  11.         roundedRect(ctx,53,119,49,16,6);  
  12.         roundedRect(ctx,135,53,49,33,10);  
  13.         roundedRect(ctx,135,119,25,49,10);  
  14.   
  15.         ctx.beginPath();  
  16.         ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false);  
  17.         ctx.lineTo(31,37);  
  18.         ctx.fill();  
  19.   
  20.         for(var i=0;i<8;i++){  
  21.             ctx.fillRect(51+i*16,35,4,4);  
  22.         }  
  23.   
  24.         for(i=0;i<6;i++){  
  25.             ctx.fillRect(115,51+i*16,4,4);  
  26.         }  
  27.   
  28.         for(i=0;i<8;i++){  
  29.             ctx.fillRect(51+i*16,99,4,4);  
  30.         }  
  31.   
  32.         ctx.beginPath();  
  33.         ctx.moveTo(83,116);  
  34.         ctx.lineTo(83,102);  
  35.         ctx.bezierCurveTo(83,94,89,88,97,88);  
  36.         ctx.bezierCurveTo(105,88,111,94,111,102);  
  37.         ctx.lineTo(111,116);  
  38.         ctx.lineTo(106.333,111.333);  
  39.         ctx.lineTo(101.666,116);  
  40.         ctx.lineTo(97,111.333);  
  41.         ctx.lineTo(92.333,116);  
  42.         ctx.lineTo(87.666,111.333);  
  43.         ctx.lineTo(83,116);  
  44.         ctx.fill();  
  45.   
  46.         ctx.fillStyle = "white";  
  47.         ctx.beginPath();  
  48.         ctx.moveTo(91,96);  
  49.         ctx.bezierCurveTo(88,96,87,99,87,101);  
  50.         ctx.bezierCurveTo(87,103,88,106,91,106);  
  51.         ctx.bezierCurveTo(94,106,95,103,95,101);  
  52.         ctx.bezierCurveTo(95,99,94,96,91,96);  
  53.         ctx.moveTo(103,96);  
  54.         ctx.bezierCurveTo(100,96,99,99,99,101);  
  55.         ctx.bezierCurveTo(99,103,100,106,103,106);  
  56.         ctx.bezierCurveTo(106,106,107,103,107,101);  
  57.         ctx.bezierCurveTo(107,99,106,96,103,96);  
  58.         ctx.fill();  
  59.   
  60.         ctx.fillStyle = "black";  
  61.         ctx.beginPath();  
  62.         ctx.arc(101,102,2,0,Math.PI*2,true);  
  63.         ctx.fill();  
  64.   
  65.         ctx.beginPath();  
  66.         ctx.arc(89,102,2,0,Math.PI*2,true);  
  67.         ctx.fill();  
  68.     }  
  69.   
  70.     // 封装的一个用于绘制圆角矩形的函数.  
  71.     function roundedRect(ctx,x,y,width,height,radius){  
  72.         ctx.beginPath();  
  73.         ctx.moveTo(x,y+radius);  
  74.         ctx.lineTo(x,y+height-radius);  
  75.         ctx.quadraticCurveTo(x,y+height,x+radius,y+height);  
  76.         ctx.lineTo(x+width-radius,y+height);  
  77.         ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);  
  78.         ctx.lineTo(x+width,y+radius);  
  79.         ctx.quadraticCurveTo(x+width,y,x+width-radius,y);  
  80.         ctx.lineTo(x+radius,y);  
  81.         ctx.quadraticCurveTo(x,y,x,y+radius);  
  82.         ctx.stroke();  
  83.     }  
  84. </script>  

 

 10、

11.jpg

XML/HTML Code复制内容到剪贴板
  1. <canvas id="canvas" width="200" height="200"></canvas>  
  2.   
  3. <script>  
  4.     var c=document.getElementById("canvas");        //通过使用 document.getElementById() 方法来为 <canvas> 元素得到DOM对象  
  5.     if (c.getContext) {  
  6.         var ctx = canvas.getContext("2d");  
  7.   
  8.         var rectangle = new Path2D();  
  9.         rectangle.rect(10, 10, 50, 50);  
  10.   
  11.         var circle = new Path2D();  
  12.         circle.moveTo(125, 35);  
  13.         circle.arc(100, 35, 25, 0, 2 * Math.PI);  
  14.   
  15.         ctx.stroke(rectangle);  
  16.         ctx.fill(circle);  
  17.     }  
  18. </script>  

 

11、

11.jpg

XML/HTML Code复制内容到剪贴板
  1. <canvas id="canvas" width="200" height="200"></canvas>  
  2.   
  3. <script>  
  4.     var c=document.getElementById("canvas");        //通过使用 document.getElementById() 方法来为 <canvas> 元素得到DOM对象  
  5.     if (c.getContext) {  
  6.         var ctx = canvas.getContext("2d");  
  7.   
  8.         for (var i=0;i<6;i++){  
  9.             for (var j=0;j<6;j++){  
  10.                 ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +  
  11.                         Math.floor(255-42.5*j) + ',0)';  
  12.                 ctx.fillRect(j*25,i*25,25,25);  
  13.             }  
  14.         }  
  15.     }  
  16. </script>  

 

 12、

11.jpg

XML/HTML Code复制内容到剪贴板
  1. <canvas id="canvas" width="200" height="200"></canvas>  
  2.   
  3. <script>  
  4.     var c=document.getElementById("canvas");        //通过使用 document.getElementById() 方法来为 <canvas> 元素得到DOM对象  
  5.     if (c.getContext) {  
  6.         var ctx = canvas.getContext("2d");  
  7.   
  8.         for (var i=0;i<6;i++){  
  9.             for (var j=0;j<6;j++){  
  10.                 ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +  
  11.                         Math.floor(255-42.5*j) + ')';  
  12.                 ctx.beginPath();  
  13.                 ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);  
  14.                 ctx.stroke();  
  15.             }  
  16.         }  
  17.     }  
  18. </script>  

 

 13、

11.jpg

XML/HTML Code复制内容到剪贴板
  1. <canvas id="canvas" width="200" height="200"></canvas>  
  2.   
  3. <script>  
  4.     var c=document.getElementById("canvas");        //通过使用 document.getElementById() 方法来为 <canvas> 元素得到DOM对象  
  5.     if (c.getContext) {  
  6.         var ctx = canvas.getContext("2d");  
  7.   
  8.         // 画背景  
  9.         ctx.fillStyle = '#FD0';  
  10.         ctx.fillRect(0,0,75,75);  
  11.         ctx.fillStyle = '#6C0';  
  12.         ctx.fillRect(75,0,75,75);  
  13.         ctx.fillStyle = '#09F';  
  14.         ctx.fillRect(0,75,75,75);  
  15.         ctx.fillStyle = '#F30';  
  16.         ctx.fillRect(75,75,75,75);  
  17.         ctx.fillStyle = '#FFF';  
  18.   
  19.         // 设置透明度值  
  20.         ctx.globalAlpha = 0.2;  
  21.   
  22.         // 画半透明圆  
  23.         for (var i=0;i<7;i++){  
  24.             ctx.beginPath();  
  25.             ctx.arc(75,75,10+10*i,0,Math.PI*2,true);  
  26.             ctx.fill();  
  27.         }  
  28.     }  
  29. </script>  

 

 14、

11.jpg

XML/HTML Code复制内容到剪贴板
  1. <canvas id="canvas" width="200" height="200"></canvas>  
  2.   
  3. <script>  
  4.     var c=document.getElementById("canvas");        //通过使用 document.getElementById() 方法来为 <canvas> 元素得到DOM对象  
  5.     if (c.getContext) {  
  6.         var ctx = canvas.getContext("2d");  
  7.   
  8.         // 画背景  
  9.         ctx.fillStyle = 'rgb(255,221,0)';  
  10.         ctx.fillRect(0,0,150,37.5);  
  11.         ctx.fillStyle = 'rgb(102,204,0)';  
  12.         ctx.fillRect(0,37.5,150,37.5);  
  13.         ctx.fillStyle = 'rgb(0,153,255)';  
  14.         ctx.fillRect(0,75,150,37.5);  
  15.         ctx.fillStyle = 'rgb(255,51,0)';  
  16.         ctx.fillRect(0,112.5,150,37.5);  
  17.   
  18.         // 画半透明矩形  
  19.         for (var i=0;i<10;i++){  
  20.             ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';  
  21.             for (var j=0;j<4;j++){  
  22.                 ctx.fillRect(5+i*14,5+j*37.5,14,27.5)  
  23.             }  
  24.         }  
  25.     }  
  26. </script>  

 

15、

11.jpg 

XML/HTML Code复制内容到剪贴板
  1. <canvas id="canvas" width="200" height="200"></canvas>  
  2.   
  3. <script>  
  4.     var c=document.getElementById("canvas");        //通过使用 document.getElementById() 方法来为 <canvas> 元素得到DOM对象  
  5.     if (c.getContext) {  
  6.         var ctx = canvas.getContext("2d");  
  7.   
  8.         for (var i = 0; i < 10; i++){  
  9.             ctx.lineWidth = 1+i;  
  10.             ctx.beginPath();  
  11.             ctx.moveTo(5+i*14,5);  
  12.             ctx.lineTo(5+i*14,140);  
  13.             ctx.stroke();  
  14.         }  
  15.     }  
  16. </script>  

 

 16、

11.jpg

PHP Code复制内容到剪贴板
  1. <canvas id="canvas" width="200" height="200"></canvas>  
  2.   
  3. <script>  
  4.     var c=document.getElementById("canvas");        //通过使用 document.getElementById() 方法来为 <canvas> 元素得到DOM对象  
  5.     if (c.getContext) {  
  6.         var ctx = canvas.getContext("2d");  
  7.   
  8.         var lineCap = ['butt','round','square'];  
  9.   
  10.         // 创建路径  
  11.         ctx.strokeStyle = '#09f';  
  12.         ctx.beginPath();  
  13.         ctx.moveTo(10,10);  
  14.         ctx.lineTo(140,10);  
  15.         ctx.moveTo(10,140);  
  16.         ctx.lineTo(140,140);  
  17.         ctx.stroke();  
  18.   
  19.         // 画线条  
  20.         ctx.strokeStyle = 'black';  
  21.         for (var i=0;i<lineCap.length;i++) {  
  22.             ctx.lineWidth = 15;  
  23.             ctx.lineCap = lineCap[i];  
  24.             ctx.beginPath();  
  25.             ctx.moveTo(25 + i * 50, 10);  
  26.             ctx.lineTo(25 + i * 50, 140);  
  27.             ctx.stroke();  
  28.         }  
  29.     }  
  30. </script>  

 

17、

11.jpg

PHP Code复制内容到剪贴板
  1. <canvas id="canvas" width="200" height="200"></canvas>  
  2.   
  3. <script>  
  4.     var c=document.getElementById("canvas");        //通过使用 document.getElementById() 方法来为 <canvas> 元素得到DOM对象  
  5.     if (c.getContext) {  
  6.         var ctx = canvas.getContext("2d");  
  7.   
  8.         var lineJoin = ['round','bevel','miter'];  
  9.         ctx.lineWidth = 10;  
  10.         for (var i=0;i<lineJoin.length;i++){  
  11.             ctx.lineJoin = lineJoin[i];  
  12.             ctx.beginPath();  
  13.             ctx.moveTo(-5,5+i*40);  
  14.             ctx.lineTo(35,45+i*40);  
  15.             ctx.lineTo(75,5+i*40);  
  16.             ctx.lineTo(115,45+i*40);  
  17.             ctx.lineTo(155,5+i*40);  
  18.             ctx.stroke();  
  19.         }  
  20.     }  
  21. </script>  

 

18、动态虚线

11.jpg

XML/HTML Code复制内容到剪贴板
  1. <canvas id="canvas" width="200" height="200"></canvas>  
  2.   
  3. <script>  
  4.     var ctx = document.getElementById('canvas').getContext('2d');  
  5.     var offset = 0;  
  6.   
  7.     function draw() {  
  8.         ctx.clearRect(0,0, canvas.width, canvas.height);  
  9.         ctx.setLineDash([4, 2]);  
  10.         ctx.lineDashOffset = -offset;  
  11.         ctx.strokeRect(10,10, 100, 100);  
  12.     }  
  13.   
  14.     function march() {  
  15.         offset++;  
  16.         if (offset > 16) {  
  17.             offset = 0;  
  18.         }  
  19.         draw();  
  20.         setTimeout(march, 20);  
  21.     }  
  22.   
  23.     march();  
  24. </script>  

 

 19、

11.jpg 

XML/HTML Code复制内容到剪贴板
  1. <canvas id="canvas" width="200" height="200"></canvas>  
  2.   
  3. <script>  
  4.     var c=document.getElementById("canvas");        //通过使用 document.getElementById() 方法来为 <canvas> 元素得到DOM对象  
  5.     if (c.getContext) {  
  6.         var ctx = canvas.getContext("2d");  
  7.   
  8.         // Create gradients  
  9.         var lingrad = ctx.createLinearGradient(0,0,0,150);  
  10.         lingrad.addColorStop(0, '#00ABEB');  
  11.         lingrad.addColorStop(0.5, '#fff');  
  12.         lingrad.addColorStop(0.5, '#26C000');  
  13.         lingrad.addColorStop(1, '#fff');  
  14.   
  15.         var lingrad2 = ctx.createLinearGradient(0,50,0,95);  
  16.         lingrad2.addColorStop(0.5, '#000');  
  17.         lingrad2.addColorStop(1, 'rgba(0,0,0,0)');  
  18.   
  19.         // assign gradients to fill and stroke styles  
  20.         ctx.fillStyle = lingrad;  
  21.         ctx.strokeStyle = lingrad2;  
  22.   
  23.         // draw shapes  
  24.         ctx.fillRect(10,10,130,130);  
  25.         ctx.strokeRect(50,50,50,50);  
  26.     }  
  27. </script>  

 

 20、

11.jpg

XML/HTML Code复制内容到剪贴板
  1. <canvas id="canvas" width="200" height="200"></canvas>  
  2.   
  3. <script>  
  4.     var c=document.getElementById("canvas");        //通过使用 document.getElementById() 方法来为 <canvas> 元素得到DOM对象  
  5.     if (c.getContext) {  
  6.         var ctx = canvas.getContext("2d");  
  7.         // 创建渐变  
  8.         var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);  
  9.         radgrad.addColorStop(0, '#A7D30C');  
  10.         radgrad.addColorStop(0.9, '#019F62');  
  11.         radgrad.addColorStop(1, 'rgba(1,159,98,0)');  
  12.   
  13.         var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);  
  14.         radgrad2.addColorStop(0, '#FF5F98');  
  15.         radgrad2.addColorStop(0.75, '#FF0188');  
  16.         radgrad2.addColorStop(1, 'rgba(255,1,136,0)');  
  17.   
  18.         var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);  
  19.         radgrad3.addColorStop(0, '#00C9FF');  
  20.         radgrad3.addColorStop(0.8, '#00B5E2');  
  21.         radgrad3.addColorStop(1, 'rgba(0,201,255,0)');  
  22.   
  23.         var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);  
  24.         radgrad4.addColorStop(0, '#F4F201');  
  25.         radgrad4.addColorStop(0.8, '#E4C700');  
  26.         radgrad4.addColorStop(1, 'rgba(228,199,0,0)');  
  27.   
  28.         // 画图形  
  29.         ctx.fillStyle = radgrad4;  
  30.         ctx.fillRect(0,0,150,150);  
  31.         ctx.fillStyle = radgrad3;  
  32.         ctx.fillRect(0,0,150,150);  
  33.         ctx.fillStyle = radgrad2;  
  34.         ctx.fillRect(0,0,150,150);  
  35.         ctx.fillStyle = radgrad;  
  36.         ctx.fillRect(0,0,150,150);  
  37.     }  
  38. </script>  

 

 21、

Canvas_createpattern.png

XML/HTML Code复制内容到剪贴板
  1. function draw() {  
  2.   var ctx = document.getElementById('canvas').getContext('2d');  
  3.   
  4.   // 创建新 image 对象，用作图案  
  5.   var img = new Image();  
  6.   img.src = 'images/wallpaper.png';  
  7.   img.onload = function(){  
  8.   
  9.     // 创建图案  
  10.     var ptrn = ctx.createPattern(img,'repeat');  
  11.     ctx.fillStyle = ptrn;  
  12.     ctx.fillRect(0,0,150,150);  
  13.   
  14.   }  
  15. }  

 

 

本文来自于：http://www.yoyo88.cn/study/canvas/108.html

上一篇 返回列表
下一篇 绘制命令
相关的文章
Powered by yoyo苏ICP备15045725号