Javascript Canvas

Javascript Canvas 是HTML5中新增的绘图API，它可以让我们在网页上进行绘图、动画和交互等操作。通过 Javascript Canvas，Web开发人员可以轻松地创建图表、游戏以及其他类似于 Flash 的 Web 应用。

使用方法

使用Canvas需要在HTML文件中添加一个Canvas元素。

<canvas id="myCanvas"></canvas>

然后通过Javascript获取Canvas对象，就可以开始绘图了。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

绘制图形

可以使用Canvas API 来绘制任意的2D图形，例如直线、矩形、圆形和文本等。在绘制图形之前，需要设置一些画图属性，例如线条的颜色、填充颜色和线条宽度。

ctx.strokeStyle = "blue";  // 设置线条颜色
ctx.lineWidth = 2;        // 设置线条宽度
ctx.fillStyle = "red";    // 设置填充颜色

// 绘制一个矩形
ctx.fillRect(10, 10, 50, 50);
ctx.strokeRect(10, 10, 50, 50);

// 绘制一条线
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(150, 150);
ctx.stroke();

// 绘制一个圆
ctx.beginPath();
ctx.arc(200, 200, 50, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();

// 输出文本
ctx.font = "30px Arial";
ctx.fillText("Hello, Canvas!", 300, 300);

绘制图片

Canvas也可以绘制图片。可以在HTML文件中创建一个Image对象，然后使用Canvas API来绘制它。

var img = new Image();
img.src = 'myImage.png';
img.onload = function() {
  ctx.drawImage(img, 0, 0);
}

动画

利用 Canvas， 我们很能够轻松地创建动画效果。可以使用 setInterval() 或 requestAnimationFrame() 函数来实现动画效果。

// 定义变量
var x = 0;

// 定义动画函数
function draw() {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 绘制图形
  ctx.fillRect(x, 10, 50, 50);
  
  // 更新变量
  x++;
  
  // 循环调用自身
  requestAnimationFrame(draw);
}

// 循环调用动画函数
draw();

参考文献

• Canvas API MDN Web Docs
• HTML 5 Canvas Tutorial for Beginners