Cavas的宽高只能写在标签上；beginPath()的用法

最新推荐文章于 2022-09-26 15:04:26 发布

原创最新推荐文章于 2022-09-26 15:04:26 发布 · 107 阅读

0 ·

CC 4.0 BY-SA版权

Canvas 专栏收录该内容

3 篇文章

订阅专栏

本文通过实例演示了如何使用HTML5的Canvas元素进行基本图形绘制，包括填充矩形、绘制线条及圆形等。

直接上代码：

<!DOCTYPE html>
<html>
<head>
    <title>Canvas</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <style>
        html, body {
            padding: 0px;
            margin: 0px;
        }
        #myCanvas {
            border: 1px solid #eee;
        }
    </style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<!--
这里要注意：canvas的宽高只能在标签上设置，如何在样式里设置，
会导致cavas画布上，形状的比例扭曲变形
-->

<script>
    var c = document.getElementById('myCanvas');
    var ctx = c.getContext('2d');

    ctx.fillStyle = '#c1e7d6';
    ctx.fillRect(0, 0, 150, 75);

    ctx.moveTo(0, 0);
    ctx.lineTo(200, 100);
    ctx.stroke(); // 画线

    ctx.beginPath(); // 重新开始一条路径，不然圆会和上面的线连在一起
    ctx.arc(95, 50, 40, 0, 2*Math.PI);
    ctx.stroke();
</script>
</body>
</html>

效果如下：