文章目录
canvas核心内容
1、概念
canvas是画布,其实就是h5的一个新标签,他自己有一套画图的语法标准。
canvas本身没有任何的绘图能力,所有的绘图工作都是通过js来实现的。通常我们在js通过getElementById来获取要操作的canvas(这意味着咱得给canvas设个id):
<canvas id="myCanvas"></canvas>
<script>
var c = document.getElementById("myCanvas"); //获取要操作的canvas
//操作canvas的代码...
</script>
注意最好在一开始的时候就给canvas设置好其宽高(若不设定宽高,浏览器会默认设置canvas大小为宽300、高100像素),而且不能使用css来设置(会被拉伸,有失真的风险),建议直接写于canvas标签内部:
<canvas id="myCanvas" width="200" height="200"></canvas>
当然,也可以在脚本中设置:
<canvas id="myCanvas"></canvas>
<script>
var c = document.getElementById("myCanvas");
c.width=200;
c.height=200;
</script>
要知道的是;超出此大小范围的部分是不可见的。顾名思义,可以把canvas看成一块画布,其大小是咱设定好的宽高,那么无论你怎么画,画布外的地方自然是画不到的。
.getContext() 是canvas的绘图对象/方法,要让canvas执行绘图工作必须先获取canvas的.getContext()对象来执行。
.getContext()只接受一个参数,该参数用于获取canvas的绘图环境,例如.getContext(“2d”)表示该canvas的绘图环境为2D平面(可以绘制文本、直线、弧线、矩形、圆形等)。还有3D环境,自行研究。
提示:
vscode中获取提示内容,在script脚本中加入:
/** @type {HTMLCanvasElement} */
上面这一行代码,表示引入canvas,就会出现提示内容。
2、绘制直线
<canvas id="myCanvas" width="200" height="200" style="border:solid 1px #CCC;">
您的浏览器不支持canvas,建议使用最新版的Chrome
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象
ctx.moveTo(10,10); //定义绘画开始的位置
ctx.lineTo(150,50); //画一条直线,结束点坐标是x=150,y=50
ctx.stroke(); //描边
</script>
效果如下:
-
.moveTo(x坐标 , y坐标) 可以理解为定位画笔在画布上的位置(注意所有绘图方法所定义的坐标是相对canvas而言的而不是浏览器窗口,对canvas来说,最左上角的点的坐标是(0,0))
-
.lineTo(x坐标 , y坐标) 顾名思义,就是画一条直线到某个点,很好理解。需要知道的是此方法仅仅做路径运动,而不存在任何视觉上的绘图效果(上色、描边)。如果不另外设置moveTo则自动把上一条边的终点作为下一条边的起点。
-
.stroke() 描边方法,canvas想要运动路径轨迹能有视觉效果,需要使用相应的上色/描边方法。
-
.strokeStyle = “red”; 设定描边颜色为红色,只要写在.stroke()方法前面即可。
-
ctx.strokeStyle可获值的形式有三种:用的时候查一查
ctx.strokeStyle=color|gradient|pattern; //即支持 “颜色/渐变/图案笔刷” 的赋值
如果要绘制两条不一样颜色的直线,就需要给第二条边绘制时,开启另外一条轨道,不然就算设置了两个颜色也不会显示出两条不同颜色的线。
案例:
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(150,50);
ctx.lineTo(20,100);
ctx.strokeStyle = "blue"; //设定描边颜色为蓝色
ctx.stroke();
ctx.beginPath(); //告诉canvas咱们要重新绘制一条全新的路径了,之前画的东西从此再无关系
ctx.moveTo(90,90);
ctx.lineTo(80,150);
ctx.strokeStyle = "red"; //设定描边颜色为红色
ctx.stroke();
</script>
效果如下:
3、绘制矩形
canvas本身就自带绘制矩形的方法;ctx.rect(x,y,w,h);
参数说明:
-
x,y:表示起点坐标,以画布左上角为坐标中心,x向右增大,y向下增大。
-
w,h:分别代表矩形的宽高。
<canvas id="box" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("box");
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "red";
ctx.fillStyle = "blue";
ctx.lineWidth = 5;
ctx.beginPath();
ctx.rect(100, 100, 200, 200);
ctx.closePath(); //闭合通道
ctx.fill(); //填充
ctx.stroke(); //描边
</script>
效果如下:
如果我们想给一个图像不仅要填充,还要绘制边框,那我们要先填充,后绘制边框,这样我们的边框才会正常显示。
所以还有另外的方法:fillRect(x,y,w,h)和strokeRect(x,y,w,h);
<canvas id="box" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("box");
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "red";
ctx.fillStyle = "blue";
ctx.lineWidth = 5;
ctx.strokeStyle = '