您的位置：首页 > 其它

canvas基础与简单图形绘制（1）

2020-06-21 04:53 169 查看

canvas基础与简单图形绘制（1）

canvas相对于画布，我们可以再里面绘制图形，制作动画（用JavaScript 脚本进行绘制，本以为web只是做简单的网页，没想到还可以制作动画，游戏，，，）

1.1查看画布

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body style="background-color: rgba(0, 183, 255, 0.199);">
<canvas id="canvas" width="400" height="400"
style="border:1px solid red;"></canvas>
</body>
</html>

这里需要注意的是canvas宽高定义的规范，在设置宽高是时候不要加上px（当然加了也可以运行，但是在后面绘图的时候可能不能达到自己想要的效果）绘出的图如下

1.2绘画的步骤

  1. 在 < script >标签里面写代码，获取 canvas 元素对应的 DOM 对象
    var canvas=docyment.getElementById(‘canvas’)
  2. 使用context进行绘图
    var context=canvas.getContext(‘2d’)
    （想要绘制3d图形的话，直接将2d改为3d即可）

1.3绘制简单图形

绘制图形最关键的就是要使用 context
1.绘制直线
//起始点
context.moveTo(x1,y1)
//终点
context.lineTo(x2,y2)
//连接
context.stroke()
js代码如下：

<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
context.moveTo(0, 0)
context.lineTo(400, 400)
context.stroke()
}
</script>

绘制出的图形如下：

说明：这里的绘图其实和python的海龟绘图本质上一样，可以视画布为一个如图的坐标系

所以只要将lineTo（x,y）指定到某一点，我们就可以绘制出各种多边形

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航