HTML5教程篇-绘图：canvas下

最新推荐文章于 2021-12-17 19:54:40 发布

0x001

最新推荐文章于 2021-12-17 19:54:40 发布

阅读量265

点赞数

分类专栏： HTML5 文章标签： HTML5 canvas

本文链接：https://blog.csdn.net/bluebloodye/article/details/100864115

版权

本文深入探讨了HTML5 Canvas的基础使用，包括如何绘制形状、路径，设置样式和颜色，以及绘制文字和图片。介绍了矩形、路径绘制方法如arc和quadraticCurveTo，以及fillStyle和strokeStyle的用法。此外，还涵盖了状态保存恢复、变换、合成和裁剪路径等高级特性。

摘要由CSDN通过智能技术生成

Canvas基本使用

canvas元素

<canvas id="myCanvas" width="200" height="100" style="border: 1px solid #000000;"></canvas>

<canvas>标签只有两个可选属性width、height属性，默认值width为300px，height为150px。（可以使用css属性来设置宽高，但宽高属性和初始比例不一致，它会出现扭曲，建议不要使用css属性来设置<canvas>的宽高。）

如果浏览器不支持<canvas>元素，请写入“你的浏览器不支持canvas，请升级你的浏览器”等内容。

<canvas id="myCanvas" width="200" height="100" style="border: 1px solid #000000;">
        你的浏览器不支持canvas，请升级！
</canvas>

2.基本示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>canvas示例2</title>
</head>

<body>
    <canvas id="myCanvas" width="300" height="300" style="border: 1px solid black;">
        你的浏览器不支持，请升级！
    </canvas>
    <script type="text/javascript">
        function draw() {
            var canvas = document.getElementById('myCanvas');
            // 检测是否支持canvas
            if (!canvas.getContext) return;
            
            var ctx = canvas.getContext('2d');
            
            ctx.fillStyle = 'rgb(200, 0, 0)';
            ctx.fillRect(10, 10, 44, 55);
            
            ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
            ctx.fillRect(30, 30, 44, 55);
        }
        draw();
    </script>
</body>

</html>

展示：