一、Canvas简介
Canvas是HTML5中的一项标准，可以用来绘制图形，创建动画等。它是一个可编程的2D图形库，可以在网页上使用JavaScript进行操作。相比其他绘图库，Canvas有很多优点，比如：快速响应用户的交互操作、高性能绘制、支持动画等。
在使用Canvas之前，需要在HTML文档中创建一个Canvas元素：
<canvas id="myCanvas"></canvas>
通过JavaScript可以获取到Canvas上下文：
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
通过getContext方法，我们可以获取到一个CanvasRenderingContext2D对象。通过这个对象，可以调用很多绘制函数来绘制图形、文本等。
二、绘制矩形和圆形
绘制矩形和圆形是Canvas中最基础的操作，我们可以使用CanvasRenderingContext2D对象提供的函数来实现。
绘制矩形：
// 绘制矩形 ctx.fillStyle = '#FF0000'; // 设置颜色 ctx.fillRect(10, 10, 100, 100); // 填充矩形
绘制圆形：
// 绘制圆形 ctx.beginPath(); // 开始路径 ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制圆形 ctx.closePath(); // 结束路径 ctx.fillStyle = '#FF0000'; // 设置颜色 ctx.fill(); // 填充
canvas提供了非常丰富的图形绘制函数，在这里就不一一列举。更加详细的信息可以查看MDN的文档。
三、创建动画
利用Canvas可以创建很炫酷的动画效果，而且还可以保持高性能。这里，我们将使用Canvas绘制一些随机运动的圆形。
绘制圆形：
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 50;
function draw() {
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = '#0095DD';
ctx.fill();
ctx.closePath();
}
draw();
上面的代码可以在Canvas上画出一个圆形，现在我们需要让它动起来。我们可以使用requestAnimationFrame来实现。
创建动画：
var dx = 2; // 水平移动距离
var dy = -2; // 垂直移动距离
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
draw();
x += dx;
y += dy;
if (x + radius > canvas.width || x - radius < 0) {
dx = -dx;
}
if (y + radius > canvas.height || y - radius < 0) {
dy = -dy;
}
}
animate();
上面的代码中，我们使用animate函数不断地调用requestAnimationFrame方法，然后清空Canvas上的内容、重新绘制圆形并且每次改变位置。当圆形碰到边界时，我们需要改变它的方向，使得圆形一直在Canvas中运动。
四、处理高清屏幕
在高清屏幕上，Canvas的像素必须是偶数，否则会造成图片模糊或者显示不全。为了保证高清屏幕上的效果，我们需要对Canvas进行相应的处理。
高清屏幕处理：
var devicePixelRatio = window.devicePixelRatio || 1;
var backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1;
var ratio = devicePixelRatio / backingStoreRatio;
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.style.width = canvas.offsetWidth + 'px';
canvas.style.height = canvas.offsetHeight + 'px';
ctx.scale(ratio, ratio);
在上面的代码中，我们首先获取Canvas的像素比例，然后通过像素比例来缩放Canvas。这样就可以在高清屏幕上达到更好的展示效果。
五、总结
Canvas是一个非常强大的2D图形库，可以用来创建高性能、炫酷的动画效果。在使用Canvas时，我们需要注意Canvas的坐标系、绘制函数、创建动画的方法等。同时在高清屏幕上的处理也需要格外注意。
下面是完整的代码：
<html>
<head>
<style>
canvas {
border: 1px solid #d3d3d3;
}
</style>
</head>
<body>
<h1>利用Canvas绘制高性能动画效果</h1>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 处理高清屏幕
var devicePixelRatio = window.devicePixelRatio || 1;
var backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1;
var ratio = devicePixelRatio / backingStoreRatio;
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.style.width = canvas.offsetWidth + 'px';
canvas.style.height = canvas.offsetHeight + 'px';
ctx.scale(ratio, ratio);
// 绘制圆形
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 50;
function draw() {
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = '#0095DD';
ctx.fill();
ctx.closePath();
}
draw();
// 创建动画
var dx = 2;
var dy = -2;
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
draw();
x += dx;
y += dy;
if (x + radius > canvas.width || x - radius < 0) {
dx = -dx;
}
if (y + radius > canvas.height || y - radius < 0) {
dy = -dy;
}
}
animate();
</script>
</body>
</html>
