canvas练习之用canvas画一条直线

最新推荐文章于 2024-10-02 15:46:49 发布

zhangxiaochunxy

最新推荐文章于 2024-10-02 15:46:49 发布

阅读量1.1k

点赞数 1

文章标签： html5 canvas js

本文链接：https://blog.csdn.net/zhangxiaochunxy/article/details/104615372

版权

这篇博客介绍了如何在HTML5的canvas上绘制直线。首先获取canvas的渲染上下文，然后利用moveTo()设置起点，lineTo()设定终点，stroke()给线条上色，最后通过closePath()结束路径。canvas的坐标系从左上角开始，(0,0)为起点，不存在负坐标。" 111343523,10294051,基于Vue & iview的后台管理系统前端开发实践,"['前端开发', 'Vue', 'Vue框架', '后台管理系统', 'iview组件库']

摘要由CSDN通过智能技术生成

上节课中我们将canvas的dom渲染了出来，但是没有做任何操作。这一节我要学习在canvas上操作，同时画一些简单的东西，比如线条。

首先，我们需要获取渲染上下文。

如下：

<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
  var canvas = document.getElementById('myCanvas')
  var ctx = canvas.getContent('2d')
</script>

在上面的javaScript代码中,第一行用来获取canvas元素的dom对象。

第二行利用canvas对象的getContent()方法来获得canvas渲染上下文和绘画功能。ge tContent()方法只有一个参数“2d”，这样我们就可以在canvas上绘制平面图形来。

为了避免碰上不支持canvas的浏览器（虽然现在这种浏览器已经很少了，尤其是在移动设备上），我们可以提前检查canvas对象中是否有getContenxt方法，如果没有，就是不支持，如下。

<script>
  var canvas = document.getElementById('myCanvas')
  if (canvas.getContext) {
     var ctx = canvas.getContext('2d')
  } else {
     window.console.log('此浏览器不支持canvas')
  }
</script>

这