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

最新推荐文章于 2023-09-15 00:08:50 发布

原创最新推荐文章于 2023-09-15 00:08:50 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #js

这篇博客介绍了HTML5 Canvas的基础知识，包括如何查看和设置画布的宽高，以及绘画的基本步骤。通过JavaScript脚本，可以获取canvas元素并使用2D渲染上下文来绘制图形。文中详细讲解了绘制直线的方法，强调了moveTo和lineTo在创建线条中的作用，并指出此绘图原理类似Python的海龟绘图。

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绘画的步骤

在 < script >标签里面写代码，获取 canvas 元素对应的 DOM 对象
var canvas=docyment.getElementById(‘canvas’)
使用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>