HTML5——Canvas 高级操作

作者：System 时间：2024年08月17日分类：所有,html5 字数：1764




<!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的常用高级用法，对于开发复杂的图形界面有很好的教育意义。

HTML5——Canvas 高级操作

评论已关闭

推荐阅读