画布（canvas）之线段（line）的绘制

最新推荐文章于 2024-05-05 10:25:22 发布

CHAO_YE

最新推荐文章于 2024-05-05 10:25:22 发布

阅读量2.2k

点赞数 2

文章标签： javascript css html html5

本文链接：https://blog.csdn.net/qq_43411412/article/details/106340538

版权

本篇博客是向大家介绍Html5中的canvas（画布）和如何在画布上画一条线段。
何为canvas：根据其中文意思—画布，我们很容易明白它是用于支持画笔图画的载体。只不过在这里的画布是一个矩形区域，我们通过控制矩形区域中的每一个像素实现绘图。具体的说，html5的canvas元素通过使用JavaScript在网页上绘制图像。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas</title>
    <style>
        #myc{
            border:1px solid rgba(200,0,0,0.5);  
            display:block;/*注释一*/
            margin:auto;
        }
    </style>
</head>
<body>
    <canvas id="myc"></canvas>
    <script>
        var c=document.getElementById("myc"); //注释二
        c.width=200;
        c.height=100;
        var cxt=c.getContext("2d");  //注释三
        var x=50,y=30,w=40;
        cxt.moveTo(x,y);  //注释四
        cxt.lineTo(x+w,y);
        cxt.lineWidth=20;
        cxt.strokeStyle="#fff000";
        cxt.lineCap="round"; //注释五
        cxt.stroke();  //注释六
    </script>
</body>
</html>

通过上面的代码我们来具体学习canvas：
1、canvas是行内元素，所以如果我们想给他设置margin属性，就要先通过display属性将他转变成块元素,如注释一所示。
2、canvas便签在定义宽度和高度时有两种定义方法，一种是直接在便签内设置宽度和高度的属性，另一种则如注释二，用js方法，使用id来寻找canvas元素，然后设置他的宽度和高度。
3、注释三的代码是创建context对象，通俗来说是定义画笔，为之后的绘图做准备。getElementById(“2d”)对象是内建的html5对象，返回一个用于在画布上绘图的环境，2d表示二维绘图。
4、注释四moveTo(x,y)是定义一个坐标为(x,y)的坐标；
lineTo(x+w,y)是定义一个终点为(x+w,y)的坐标。
5、注释五是设置线段两端的线帽形状，它可设置的值有三个：
（1）butt：这个默认值指定了线段应该没有线帽。线条的末点是平直的而且和线条的方向正交，这条线段在其端点之外没有扩展。
（2）round：这个值指定了线段应该带有一个半圆形的线帽，半圆的直径等于线段的宽度，并且线段在端点之外扩展了线段宽度的一半。
（3）square：这个值表示线段应该带有一个矩形线帽。这个值和 “butt” 一样，但是线段扩展了自己的宽度的一半。
6、注释六这行代码必不可少，他是一个方法用于绘制描边，如果不写它，就算前面写的在完美，线段在好看，都不能呈现在画布上。

CHAO_YE

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
画布（canvas）之线段（line）的绘制

本篇博客是向大家介绍Html5中的canvas（画布）和如何在画布上画一条线段。何为canvas：根据其中文意思—画布，我们很容易明白它是用于支持画笔图画的载体。只不过在这里的画布是一个矩形区域，我们通过控制矩形区域中的每一个像素实现绘图。具体的说，html5的canvas元素通过使用JavaScript在网页上绘制图像。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫