HTML5基础之canvas绘图(一)

最新推荐文章于 2024-06-03 21:34:00 发布

zhxiong1994

最新推荐文章于 2024-06-03 21:34:00 发布

阅读量558

点赞数

文章标签： html5 canvas javascript

本文链接：https://blog.csdn.net/zhxiong1994/article/details/48651499

版权

canvas绘图之线条绘制

canvas是html5中新定义的标签，它是提供一张画布，通过JavaScript来绘制图形。值得注意的是canvas 元素本身是没有绘图能力的，所有的绘制工作必须要是在 JavaScript 内部完成的。
在html5中canvas的使用：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
    您的浏览器不支持 HTML5 canvas 标签。
</canvas>

在上述代码中，我们定义了一个id为myCanvas的canvas标签，width和height分别定义了画布的款宽高，style定义了标签的属性，这里也可以通过css样式来定义。

在canvas标签中绘制图形是通过Javascript代码来实现的。Javascript实现canvas标签的绘制功能，主要分为以下几步：

获取canvas标签的ID
var myCanvas = document.getElementById('myCanvas ');
创建context对象
var cxt=myCanvas.getContext("2d");
通过cxt对象绘制图形，下面代码绘制了一条（0，0）到（200，100）的黑色实线。
ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke();
注意：在绘制线条时，我们在设置完moveTo和lineTo的参数后，我们一定要调用stroke()方法，不然绘制的线条是无法显示的。
完整代码：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
            您的浏览器不支持 HTML5 canvas 标签。
        </canvas>
    </body>
    <script type="text/javascript">
        var myCanvas = document.getElementById('myCanvas');
        var cxt = myCanvas.getContext('2d');

        cxt.moveTo(0,0);
        cxt.lineTo(200,100);
        cxt.stroke();
    </script>
</html>

zhxiong1994

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5基础之canvas绘图(一)

canvas是html5中新定义的标签，它是提供一张画布，通过JavaScript来绘制图形。值得注意的是canvas 元素本身是没有绘图能力的，所有的绘制工作必须要是在 JavaScript 内部完成的。
复制链接

扫一扫