码迷,mamicode.com
首页 > Web开发 > 详细

HTML5 canvas绘制图形

时间:2017-09-08 10:09:11      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:csharp   contex   绘制图形   idt   绘制   on()   blog   fill   dem   

demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <link rel="stylesheet" type="text/css" href="demo.css">
    <script type="text/javascript" src="demo.js"></script>
</head>
<body>
<canvas  id="mycanvas"   width="600px" height="800px" >
    <span>你的浏览器不支持canvas</span>
</canvas>

</body>
</html>

demo.js  

window.onload=function() {
    createcanvas();
    drawcanvas();

}
 function createcanvas()  {
     var CANVAS=document.getElementById(‘mycanvas‘);
      context=CANVAS.getContext(‘2d‘);


 }
function drawcanvas()  {
    context.fillStyle="#eeeeef";
    context.fillRect(0,0,600,800);
  for(var i=0;i<=10;i++) {
      context.beginPath();
      context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
      context.closePath();
      context.fillStyle="rgba(255,0,0,0.25)";
      context.fill();

  }
}

  效果:

技术分享

 

 

2017-09-08  08:36:44

HTML5 canvas绘制图形

标签:csharp   contex   绘制图形   idt   绘制   on()   blog   fill   dem   

原文地址:http://www.cnblogs.com/guangzhou11/p/7492808.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!