HTML5 canvas 绘制 矩形和 圆 形的实例代码
JavaScript Code 复制内容到剪贴板
<!DOCTY PE &nbs p; ht ML > <html> <head> < ;m eta charset= "UTF-8" > <t IT le></title> </head> <body onload= "draw(),drawarc()" > <!--绘制的步骤：获取canvas元素->取得上下文->填充与绘制边框->设定绘图样式--> <!--绘制其他复杂图形需要使用路径： 开始 创建路径->创建图形路径->关闭路径->绘制图形--> <!--eg:绘制矩形--> 绘制矩形:<canvas id= "ca" ></canvas>< br /> 绘制圆形：<canvas id= "yuan" ></canvas> </body> </html> <script> //绘制矩形 function draw(){ VAR canvas=document.getElementById( 'ca' ); //获取canvas元素 if (canvas == null ) return false ; var context=canvas.getContext( '2d' ); //取得上下文 context.fillStyle= ' # EEEFF' ; //填充颜色 context.fillRect(0,0,400,300); //填充矩形 (矩形1) context.fillStyle= ' red ' ; context. stroke Style= 'blue' ; // 边框颜色 context.lineWidth=1; //边框 宽 度 context.fillRect(50,50,100,100); //填充矩形（内部矩形2） context.strokeRect(50,50,100,100); //绘制边框 } //绘制圆形 function drawarc(){ var canvas2=document.getElementById( 'yuan' ); //获取canvas元素 if (canvas2== null ) if (canvas2== null ) return false ; var context2=canvas2.getContext( '2d' ); //取得上下文 context2.fillStyle= '#EEEEEF' ; context2.fillRect(0,0,400,300); var n=0; for ( var i=0;i<10; i++ ){ context2.be gin Path(); //开始创建路径 context2.arc(i*25,i*25,i*10,0,Math.PI*2, true ); //创建圆形路径 context2.closePath(); //关闭路径 context2.fillStyle= 'Rgba(255,0,0,0.25)' ; //设置颜色 context2.fill(); //填充图形 } } </script>
以上就是小编为大家带来的html5 canvas绘制矩形和圆形的实例代码的全部内容了，希望大家多多支持脚步之家。
总结
以上是 为你收集整理的 html5 canvas绘制矩形和圆形的实例代码 全部内容，希望文章能够帮你解决 html5 canvas绘制矩形和圆形的实例代码 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5 canvas绘制矩形和圆形的实例代码的详细内容...