使用Canvas绘制图形

最新推荐文章于 2024-01-15 11:50:28 发布

转载最新推荐文章于 2024-01-15 11:50:28 发布 · 285 阅读

HTML5 专栏收录该内容

4 篇文章

订阅专栏

html文件

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>canvas</title>
  <script type="text/javascript" src="script.js" charset="gb2312"></script>
</head>
<body "draw('canvas');">
  <h1>canvas</h1>
  <canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

script.js脚本文件

/*
// 绘制矩形
function draw(id) {

  // 取得canvas元素，并获取上下文
  var canvas = document.getElementById(id)
  if (canvas == null)
    return false;
  var context = canvas.getContext('2d');

  // 填充
  context.fillStyle = '#EEEEFF';
  context.fillRect(0,0,400,300);

  // 填充
  context.fillStyle = 'red';
  context.fillRect(50,50,100,100)

  // 绘制边框
  context.strokeStyle='blue'
  context.lineWidth=1;
  context.strokeRect(50,50,100,100)

  // 擦除
  context.clearRect(50,50,100,100)
  
}
*/

// 绘制圆形
function draw(id) {

  var canvas = document.getElementById(id)
  if (canvas == null)
    return false
  var context = canvas.getContext('2d');

  context.fillStyle = '#EEEEFF'
  context.fillRect(0,0,400,300)

  var n = 0;
  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();
  }
}