html5 canvas绘制矩形和圆形的实例代码

HTML5 canvas绘制矩形和圆形的实例代码

1. !DOCTYPE htML>   
2. html>   
3.     head>   
4.         meta charset="UTF-8">   
5.         tITle> /title>   
6.     /head>   
7.     body onload="draw(),drawarc()">   
8.         !--绘制的步骤：获取canvas元素-> 取得上下文-> 填充与绘制边框-> 设定绘图样式-->   
9.         !--绘制其他复杂图形需要使用路径：开始创建路径-> 创建图形路径-> 关闭路径-> 绘制图形-->   
10.         !--eg:绘制矩形-->   
11.         绘制矩形:canvas id="ca"> /canvas> br />   
12.         绘制圆形：canvas id="yuan"> /canvas>   
13.     /body>   
14. /html>   
15. script>   
16.     //绘制矩形   
17.     function draw(){   
18.         VAR canvas=document.getElementById('ca');  //获取canvas元素   
19.         if (canvas==null)   
20.            return false;   
21.         var context=canvas.getContext('2d');  //取得上下文   
22.         context.fillStyle='#EEEFF';    //填充颜色   
23.         context.fillRect(0,0,400,300);  //填充矩形 (矩形1)   
24.         context.fillStyle='red';   
25.         context.strokeStyle='blue';  //边框颜色   
26.         context.lineWidth=1;         //边框宽度   
27.         context.fillRect(50,50,100,100);  //填充矩形（内部矩形2）   
28.         context.strokeRect(50,50,100,100);  //绘制边框   
29.            
30.     }   
31.     //绘制圆形   
32.    function drawarc(){   
33.     var canvas2=document.getElementById('yuan');  //获取canvas元素   
34.         if (canvas2==null)   
35.     if(canvas2==null)   
36.        return false;   
37.        var context2=canvas2.getContext('2d');   //取得上下文   
38.        context2.fillStyle='#EEEEEF';   
39.        context2.fillRect(0,0,400,300);   
40.        var n=0;   
41.        for(var i=0; i10; i++){   
42.               context2.beginPath();   //开始创建路径   
43.               context2.arc(i*25,i*25,i*10,0,Math.PI*2,true);   //创建圆形路径   
44.               context2.closePath();   //关闭路径   
45.               context2.fillStyle='Rgba(255,0,0,0.25)';  //设置颜色   
46.               context2.fill();   //填充图形   
47.        }   
48. }   
49.        
50.        
51. /script>   

以上就是小编为大家带来的html5 canvas绘制矩形和圆形的实例代码的全部内容了，希望大家多多支持脚步之家。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！