HTML5 canvas绘制图形

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

posted @ 2017-09-08 08:37  1点  阅读(294)  评论(0)  编辑  收藏  举报