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

巴特西

HTML5 canvas绘制图形

最新文章

热门文章