Canvas基础知识

最新推荐文章于 2023-03-02 19:08:31 发布

小辫子小何

最新推荐文章于 2023-03-02 19:08:31 发布

阅读量358

点赞数 3

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

本文链接：https://blog.csdn.net/hexiaobian/article/details/102840812

版权

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Canvas是画布，在JavaScript上面绘制，代码实现：
在HTML中的代码：

<!doctype html>
<body>
<canvas width="300" height="150"></canvas>    //默认尺寸
</body>
</html>

在JavaScript上面的代码：

<script>
//获取元素canvas
var myCanvas = document.querySelector('canvas');
//获取上下文，绘制工具箱
var ctx = myCanvas.getContext('2d');
//移动画笔，画笔的默认位置为左上角
ctx.moveTo(x,y);
绘制轨迹
ctx.lineTo(x,y);
绘制路径
ctx.stroke();
</script>

注意
（1）canvas画布的尺寸只能在canvas标签内绘制，不能在CSS样式上对其进行宽高设置。
（2）路径跟轨迹的区别在于轨迹看不见，轨迹经描边后变成路径。
（3）canvas的默认线条为1px，黑色。但由于线对齐的点是其中心位置，所以会将线条分割成两个0.5px，而浏览器最小只能识别1px，浏览器将0.5px当成1px，所以线条颜色会变浅，线条宽度为2px。

小辫子小何

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Canvas基础知识

Canvas是画布，在JavaScript上面绘制，代码实现：在HTML中的代码：<!doctype html><body><canvas width="300" height="150"></canvas> //默认尺寸</body></html>在JavaScript上面的代码：<script...
复制链接

扫一扫