HTML5之canvas学习系列1之绘制线条

最新推荐文章于 2021-06-16 21:15:22 发布

yongye_

最新推荐文章于 2021-06-16 21:15:22 发布

阅读量287

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/yongye_/article/details/80150595

版权

HTML5 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

1 使用canvas 提供的API 绘制基本的线条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id = "myCanvas" width="1024" height="700" style="border:1px solid #aaa;display: block;margin: 5px auto;">
    您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
    window.onload = function () {
        var canvas = document.getElementById("myCanvas");
        // context对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、
        // 圆形、字符以及添加图像的方法
        var context = canvas.getContext('2d');

        context.beginPath();    // 开始一段新的路径
        context.moveTo(100, 100);  //路径移动到画布中的指定点，不创建线条
        context.lineTo(300, 100);   // 添加一个新点 该方法并不会创建线条
        context.lineTo(300, 300);
        context.lineTo(100, 300);
        context.lineTo(100, 100);
        context.closePath();    // 结束路径

        context.fillStyle = "rgb(20 ,100, 80)"; // 表示填充颜色
        context.fill(); // 进行填充
        context.lineWidth = 5; // 线条的宽度
        context.strokeStyle = "red";  // 可以设置线条颜色
        context.stroke(); // 绘制出moveTo() 和 lineTo()方法定义的路径 默认颜色是黑色

        context.beginPath();    // 开始一段新的路径
        context.moveTo(500, 200);
        context.lineTo(550, 300);
        context.closePath();    // 结束路径

        context.strokeStyle = "blue";
        context.stroke();

    }
</script>
</body>
</html>

yongye_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5之canvas学习系列1之绘制线条

1 使用canvas 提供的API 绘制基本的线条&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;body&
复制链接

扫一扫

专栏目录