html5如何创建Canvas画布？步骤分享！

2021-06-09 14:36:17 浏览数 (3563)

今天我门学习的是有关于在“html5如何创建Canvas画布？”的问题。我们来先了解一下HTML5中的 ​canvas​标签怎么创建画布，我们通过JavaScript来进行绘制图形之后，在页面中放置一个​canvas​元素，这样子的做法就相当是在页面中放置了一块画布，而且​canvas​元素中拥有多种绘制图形的方法。

1.首先，​canvas​是一个双标签，所以我们可以用标签中的​width​和​height​属性来定义画布的大小这样我们就可以创建一个隐藏画布了，我们可以通过​style​属性来让他显示出来。代码如下：

<html>
    <head>
    	<meta charset="utf-8">
        <title>canvas画布分享</title>
    </head>
    <body>
       <canvas width="200px" height="200px" style="border: 2px solid #000;"></canvas>
    </body>
</html>

运行结果截图如下：

画布canvas

这样我们就完成了一个画布的创建。（补充：在没有给​canvas​属性设置宽高的时候会默认为​300px​，当然除了在​canvas​属性中设置，我们也可以在 css 属性中进行一个设置，但是呢如果宽高属性和初始的比例不一样会出现，扭曲的现象。所以建议一般不使用 css进行设置属性！）

2.由于在​canvas​这个属性中本身没有绘制图像的能力，所以要通过 JavaScript 来实现。那么我们就来试试吧！代码如下：

<html>
	<head>
		<meta charset="utf-8">
		<title>canvas画布分享</title>
	</head>
	<body>
		<canvas id="mycanvas" width="200px" height="200px" style="border: 2px solid #000;"></canvas>
		<script>
			var can = document.getElementById("mycanvas");
			var ctx = can.getContext("2d");
			ctx.fillStyle = "#99CCFF";
			ctx.fillRect(50, 50, 100, 100);
		</script>
	</body>
</html>

运行效果如下图：

演示画布

我们看到在这个画布中我们加入了一个蓝色的矩形。

总结：

当然这只是一个简单的方法，如果你要设置更复杂的一个图形的话我们可以在HTML5 DOM CANCAS 对象进行学习和了解。以上就是今天的内容，希望对你有所帮助。