<!DOCTYPE html>
<html>
<head>
<title>Canvas 高级操作</title>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('simpleCanvas');
if (!canvas.getContext) {
return;
}
var ctx = canvas.getContext('2d');
// 创建线性渐变
var grd = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
grd.addColorStop(0, 'black');
grd.addColorStop(1, 'white');
// 填充渐变
ctx.fillStyle = grd;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 绘制圆形
ctx.beginPath();
ctx.arc(70, 70, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'green';
ctx.fill();
// 绘制图片
var img = new Image();
img.src = 'image.png';
img.onload = function() {
ctx.drawImage(img, 10, 10, 100, 100);
};
// 绘制带样式的文本
ctx.font = '30px Arial';
ctx.fillStyle = 'blue';
ctx.textAlign = 'center';
ctx.fillText('Hello Canvas', canvas.width / 2, canvas.height / 2);
// 绘制路径
ctx.beginPath();
ctx.moveTo(70, 140);
ctx.bezierCurveTo(70, 100, 300, 100, 300, 140);
ctx.strokeStyle = 'red';
ctx.stroke();
}
</script>
</head>
<body onload="draw();">
<canvas id="simpleCanvas" width="400" height="400">
您的浏览器不支持Canvas，请更换浏览器后再试。
</canvas>
</body>
</html>这段代码在页面加载完成后会执行draw函数，该函数会在一个canvas元素中完成以下操作：创建线性渐变、填充渐变；绘制一个圆形；加载并绘制一张图片；绘制带样式的文本；绘制一条带有贝塞尔曲线的路径。这些操作是HTML5 Canvas API的常用高级用法，对于开发复杂的图形界面有很好的教育意义。