html-canvas-简单入门

最新推荐文章于 2023-06-09 11:35:33 发布

战神vs帝皇

最新推荐文章于 2023-06-09 11:35:33 发布

阅读量170

点赞数

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

本文链接：https://blog.csdn.net/ZhanShenvsDiHuang/article/details/124289907

版权

html5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

canvas定义：
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，我们可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

运用：

<body>
	<canvas id="canvas1" width="600" height="600">
		正常的画布是不显示的这个内容的，如果你看到这个，说明你的浏览器不支持canvas
	</canvas>
	<script type="text/javascript">
		var canvas1 = document.querySelector("#canvas1")
		console.log([canvas1])
		//上下文对象，画笔
		var ctx = canvas1.getContext("2d")
		// var ctx = canvas1.getContext("webgl")//3d
		//绘制路径，画一个矩形
		ctx.rect(50,50,300,300)
		//填充，
		ctx.fillStyle = "aqua"
		ctx.fill()
		//描边
		ctx.lineWidth = 20
		ctx.strokeStyle = "salmon"
		ctx.stroke()
	</script>
</body>