< p >JavaScript Canvas 是 HTML5 新引入的一个 API ，它允许你在 DOM 中创建一个 canvas 元素，然后通过JavaScript 操纵该元素绘制2D图像和动画。与其他绘图API相比，JavaScript Canvas 更加灵活、易于掌握，被广泛应用于网页游戏、数据可视化等领域。

在使用 Canvas 时，我们需要先获取到该元素的上下文Context对象，它是我们在 canvas 上进行绘制的接口。在 HTML 页面中，通过标签创建 Canvas 画布，并设置宽度和高度属性：

<canvas id="myCanvas" width="500" height="500"></canvas>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

一旦获取到了Context对象，我们就可以开始绘制了。下面是一些常用的绘制方法和属性：

//绘制矩形
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
//绘制文本
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
//绘制线条
ctx.moveTo(0,0);
ctx.lineTo(200,200);
ctx.stroke();

以上代码实现了在 canvas 中绘制一个红色的矩形、一段文本以及一条斜线。它们都是通过设置不同的属性实现的。fillStyle 用来设置填充的颜色，fillRect 用来绘制实心矩形；font 用来设置字体的大小、样式、颜色等，fillText 用来绘制文本；moveTo 和 lineTo 用来设置线条的起点和终点，stroke 用来绘制线条。

除了简单的绘图，Canvas 还支持绘制图像和动画。下面是一个通过 Canvas 实现的动画效果：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function(){
var x = 0;
var y = 0;
var dx = 5;
var dy = 5;
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(img, x, y);
if(x + dx >canvas.width - 100 || x + dx< 0){
dx = -dx;
}
if(y + dy >canvas.height - 100 || y + dy< 0){
dy = -dy;
}
x += dx;
y += dy;
}
setInterval(draw,10);
};
img.src = "image.png";

以上代码实现了一个图像在canvas上的移动效果。先使用 Image 对象加载图像，然后在 onload 事件中绘制该图像，并在 setInterval 中调用 draw 函数，不断更新 x、y 坐标，实现了动画效果。另外，通过判断 x、y 坐标是否触及画布边界，实现图像的反弹效果。

JavaScript Canvas 提供了众多灵活的绘图方法和属性，我们可以根据实际需求任意组合使用。在应用中，需要注意 Canvas 的性能问题，避免频繁的重绘导致性能下降。另外， Canvas 不支持跨域资源访问，需要注意加载图像等资源的问题。