html5如何创建Canvas画布?步骤分享!

猿友 2021-06-09 14:36:17 浏览数 (3543)
反馈

今天我门学习的是有关于在“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 对象进行学习和了解。以上就是今天的内容,希望对你有所帮助。


0 人点赞