关于HTML5的画布canvas

最新推荐文章于 2022-04-24 17:28:28 发布

若子虚

最新推荐文章于 2022-04-24 17:28:28 发布

阅读量864

点赞数

分类专栏： WEB前端文章标签： HTML WEB前端 HTML5 canvas

本文链接：https://blog.csdn.net/u012311697/article/details/44662997

版权

WEB前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

毋庸置疑，这是一个很强大的HTML5的功能哦~不过鉴于鄙人也是菜鸟，这篇文章就算是canvas的入门吧(注意IE8（含）以下不兼容<canvas>元素)。

步入正题（首先给个W3school的demo）：

1.我们先新建一个画布（设置id等下js要用，设置画布的宽度和高度）：

<canvas id="canvasDemo" width="200" height="100"></canvas>

2.然后我们需要JavaScript出场了：

<script type="text/javascript">
var canvas=document.getElementById("canvasDemo");
var cxt=canvas.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

我们来简单解释一下：

首先我们通过获取id的方式拿到了画布 var canvas=document.getElementById("canvasDemo");，

然后创建 context 对象：var cxt=canvas.getContext("2d");getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法，

然后我们要在画布上画画了：cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);，fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸，cxt.fillRect(0,0,150,75)表示从左上角（0,0）处开始画，画的图形的宽度（width）为150px，高度（height）为75px。

注意：JS代码要放在<canvas>标签之后，否则无法正常执行，控制台会出错：

下面是正常的代码：

<!doctype html>
<html>
<head>
	<style type="text/css">
	canvas{
		border:1px solid #333;
	}
	</style>
</head>
<body>
	<canvas id="canvasDemo" width="200" height="100"></canvas>

	<script type="text/javascript">
	var canvas = document.getElementById("canvasDemo");
	var cxt = canvas.getContext("2d");
	cxt.fillStyle = "#FF0000";
	cxt.fillRect(0,0,150,75);
	</script>
</body>
</html>

演示的效果为：

下面说个画直线的：先直接上源码吧，然后再一步步解释：

<!doctype html>
<html>
<head>
	<style type="text/css">
	canvas{
		border:1px solid #333;
	}
	</style>
</head>
<body>
	<canvas id="canvasDemo" width="200" height="100"></canvas>
	<script type="text/javascript">
	var canvas = document.getElementById("canvasDemo");
	var cxt = canvas.getContext("2d");
	cxt.moveTo(10,10);
	cxt.lineTo(150,75);
	cxt.lineTo(10,50);
	cxt.lineTo(30,100);
	cxt.stroke();
	</script>
</body>
</html>

cxt.moveTo(x,y)方法是定义线条的开始坐标，cxt.lineTo(x,y)方法是定义线条结束坐标。所以源码中cxt.lineTo(150,75);cxt.lineTo(10,50);cxt.lineTo(30,100);就是相当于画了三条直线（图中就是折线了），最后stroke() 方法来绘制线条。

下面是演示的效果：

接着我们来画一个圆：

<!doctype html>
<html>
<head>
	<style type="text/css">
	canvas{
		border:1px solid #333;
	}
	</style>
</head>
<body>
	<canvas id="canvasDemo" width="200" height="100"></canvas>
	<script type="text/javascript">
	var canvas = document.getElementById("canvasDemo");
	var cxt = canvas.getContext("2d");
	cxt.fillStyle = "#FF0000"; //给圆填充颜色
	cxt.beginPath();
	cxt.arc(100,50,50,0,2*Math.PI);
	cxt.closePath();
	cxt.fill();
	cxt.stroke();
	</script>
</body>
</html>

画圆最关键的一个方法：arc(x,y,r,start,stop)，我们可以通过start和stop选择画全圆，半圆，1/4圆等；然后通过cxt.beginPath()、cxt.closePath()开始画圆和画圆结束。cxt.fill()是将原内部可填充颜色等属性。cxt.stroke()画出一个圆的轮廓。比如说把cxt.fill()去掉那么圆就没有颜色了只有外部的一个圆的轮廓。如果把cxt.stroke()去掉那我们可以看见一个红色的圆，但是看不见外面的一圈轮廓，有兴趣的同学可以试一下。

下面是演示的效果：

接下来我们在画布中绘制文本：

<!doctype html>
<html>
<head>
	<style type="text/css">
	canvas{
		border:1px solid #333;
	}
	</style>
</head>
<body>
	<canvas id="canvasDemo" width="200" height="100"></canvas>
	<script type="text/javascript">
	var canvas = document.getElementById("canvasDemo");
	var cxt = canvas.getContext("2d");
	cxt.font = "20px Microsoft YaHei"; //定义文本的字体
	cxt.fillText("这是一个实心文本",10,30); //在画布上写一个实心的文本，10代表文本left:10px ,30代表文本top:30-20 =10
	cxt.strokeText("这是一个空心文本",10,60); //在画布上写一个空心的文本，10代表文本left:10px ,60代表文本top:60-20 =40
	</script>
</body>
</html>

下面是演示的效果：

值得注意的是fillText("text",x,y)和stroke("text",x,y)，x直接是文本距画布左边距的距离，但是y是距画布top的距离+文本本身的高度。

下面我们在画布中实现渐变效果：

<!doctype html>
<html>
<head>
	<style type="text/css">
	canvas{
		border:1px solid #333;
	}
	</style>
</head>
<body>
	<canvas id="canvasDemo" width="200" height="100"></canvas>
	<script type="text/javascript">
	var canvas = document.getElementById("canvasDemo");
	var cxt = canvas.getContext("2d");
	var color = cxt.createLinearGradient(0,0,200,100); //创建一个线性渐变createLinearGradient(x,y,x1,y1),这是一个从左上角到右下角的一个线性渐变
	/*createRadialGradient(x,y,r,x1,y1,r1)可以创建一个径向/圆渐变*/
	color.addColorStop(0,"#FF0000"); //渐变开始的颜色
	color.addColorStop(1,"#00FF00"); //渐变结束的颜色
	cxt.fillStyle = color;
	cxt.fillRect(0,0,200,100);
	</script>
</body>
</html>

下面是演示的效果：