如何使用Canvas(1)

最新推荐文章于 2024-04-16 07:47:14 发布

earth_small_ma

最新推荐文章于 2024-04-16 07:47:14 发布

阅读量185

点赞数

分类专栏： Canvas 文章标签： canvas html5

本文链接：https://blog.csdn.net/earth_smallma/article/details/81175708

版权

6 篇文章 0 订阅

订阅专栏

Canvas是HTML5中的一个标签，其本身与其他标签并无差别，不要将其与其他标签分开看待

Canvas的使用如下：

#canvas{
    border: 1px solid black;/*设置边框后里你便能够在页面中看见canvas元素了*/
}

<canvas id="canvas" width="500" height="500"></canvas>

由于其本身也是标签，因此，我们可以像操作其他html标签一样给他设置css样式

注意：请按照上述行内方式为canvas设置宽高，如果用css样式表设置的话，在绘图时，坐标会出现问题

var canvas = document.getElementById('canvas');

你可以将canvas元素对象理解为画布

canvas也是标签，故可以对其进行DOM操作(你甚至可以通过DOM创建canvas标签，然后再添加到页面)

var ctx = canvas.getContext('2d');

使用getContext方法获取2D上下文。你可以将上下文理解为属于这个canvas画布的画笔

除了2D为，还有3D，但是我们只接触2D

画笔拿到后，便可以通过画笔来绘图了

canvas中的坐标以canvas画布左上角为原点，水平向右为x正方向，垂直向下为y正方向

下一篇——用Canvas绘制线段（2）

关注