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

时间：2021-05-08

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

JavaScript Code复制内容到剪贴板
  • <!DOCTYPEhtml>
  • <html>
  • <head>
  • <metacharset="UTF-8">
  • <title></title>
  • </head>
  • <bodyonload="draw(),drawarc()">
  • <!--绘制的步骤：获取canvas元素->取得上下文->填充与绘制边框->设定绘图样式-->
  • <!--绘制其他复杂图形需要使用路径：开始创建路径->创建图形路径->关闭路径->绘制图形-->
  • <!--eg:绘制矩形-->
  • 绘制矩形:<canvasid="ca"></canvas><br/>
  • 绘制圆形：<canvasid="yuan"></canvas>
  • </body>
  • </html>
  • <script>
  • //绘制矩形
  • functiondraw(){
  • varcanvas=document.getElementById('ca');//获取canvas元素
  • if(canvas==null)
  • returnfalse;
  • varcontext=canvas.getContext('2d');//取得上下文
  • context.fillStyle='#EEEFF';//填充颜色
  • context.fillRect(0,0,400,300);//填充矩形(矩形1)
  • context.fillStyle='red';
  • context.strokeStyle='blue';//边框颜色
  • context.lineWidth=1;//边框宽度
  • context.fillRect(50,50,100,100);//填充矩形（内部矩形2）
  • context.strokeRect(50,50,100,100);//绘制边框
  • }
  • //绘制圆形
  • functiondrawarc(){
  • varcanvas2=document.getElementById('yuan');//获取canvas元素
  • if(canvas2==null)
  • if(canvas2==null)
  • returnfalse;
  • varcontext2=canvas2.getContext('2d');//取得上下文
  • context2.fillStyle='#EEEEEF';
  • context2.fillRect(0,0,400,300);
  • varn=0;
  • for(vari=0;i<10;i++){
  • context2.beginPath();//开始创建路径
  • 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绘制矩形和圆形的实例代码的全部内容了，希望大家多多支持脚步之家。

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章