canvas标签
<canvas></canvas>
接下来使用支持H5的浏览器打开该页面,将会看到如下内容:
canvas画布标签兼容处理:
如果浏览器不兼容,最好进行友好提示,提示内容只有在浏览器不支持时才显示。
<canvas>您的浏览器不支持canvas标签</canvas>
结果分析:
由上述结果可以分析出,在H5中,canvas标签本身并没有任何行为,仅仅只是在页面上占用指定大小的页面空白空间。canvas标签就相当于一块空白的画布,还需要使用js提供的API编写相应的代码从而在这块画布上绘制出图形。
通俗理解:
canvas就是一块画布,可以使用js当画笔在上面绘画,可以显示在网页上。
canvas标签常用属性
属性 | 默认值 |
---|---|
id | 无(为画布起一个id名称) |
height | 300(设置canvas的高度) |
width | 150(设置canvas的宽度) |
注意:
- 如果浏览器不兼容,也可以使用flash等手段进行优雅降级
- 不能使用CSS样式控制canvas元素的宽高,否则会导致绘制的图形拉伸
- 重新设置canvas标签的宽高属性会导致画布擦除所有的内容
- 可以给canvas画布设置背景色
画布宽高注意事项:
- canvas画布是一个行内块级元素,该元素默认的宽高为300*150,可以通过元素的width属性和height属性改变默认的宽高。
- 不能使用CSS样式控制canvas元素宽高,否则会导致绘制的图形拉伸
- 原因:因为canvas的默认高度是300*150,所以如果使用css为canvas设置width和height,会导致canvas绘制的图像被压缩。所以开发中使用width与height属性来设置canvas的宽高,而不是通过CSS。
canvas的平面坐标系:
canvas的角度坐标系:
图形绘制基本步骤:
- 第1步:获取画布对象:var canvas = document.querySelector(’…’);
- 第2步:获得上下文即画笔:var ctx = canvas.getContext(‘2d’);
- 第3步:记录绘制起始点:ctx.moveTo(sx, sy);
- 第4步:绘制线至终点:ctx.lineTo(dx, dy);
- 第5步:封闭路径:ctx.closePath();
- 第6步:绘制描边确定直线中起点和端点的连线:ctx.stroke();
JavaScript脚本中< canvas >常用操作
操作 | JavaScript代码 |
---|---|
获取画布 | var canvas=document.getElementById(“canvas”); |
获取画笔 | var ctx=canvas.getContext(“2d”); |
设置画布宽度 | canvas.width=600; |
设置画布高度 | canvas.height=400; |
获取画布宽度 | var canvasWidth=canvas.offsetWidth; |
获取画布高度 | var canvasHeight=canvas.offsetHeight; |
基本图形绘制—矩形
<canvas id="canvas">您的浏览器不支持canvas标签</canvas>
<script>
//1、获取画布对象
var canvas = document.querySelector("#canvas");
//2、获得上下文,即画笔
var ctx = canvas.getContext("2d");
//重新设置标签的属性宽高,注意:不要用canvas.style.height
canvas.width = 300;
canvas.height = 250;
// 绘制矩形
ctx.beginPath();
ctx.strokeRect(10,10,250,200);//绘制边线矩形
ctx.rect(15,15,200,150);//绘制普通矩形
// (rect()方法只是规划了矩形的路径,并没有填充和描边,需要单独描边或填充)
//快速创建一个描边的矩形
ctx.fillStyle = "lightblue";//填充前,可以设置填充的颜色
ctx.fillRect(20,20,180,100);//绘制填充矩形;
//清除矩形
ctx.clearRect(25,25,50,50);
ctx.stroke();//绘制
</script>
案例1:tree树
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tree</title>
<style>
*{
margin: 0;
padding: 0;
}
canvas{
border: 1px solid gray;
}
</style>
</head>
<body>
<canvas id="canvas">您的浏览器不支持canvas标签</canvas>
<script>
// 1、获取画布
var canvas = document.querySelector("#canvas");
// 2、获取下文对象CanvasRenderingContext2D,即画笔
var ctx = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 600;
// 3、绘制直线
ctx.beginPath();//开始绘制,开始路径规划
ctx.moveTo(250,50);//绘制直线的起点
ctx.lineTo(110,150);//绘制直线的端点
ctx.lineTo(200,150);
ctx.lineTo(80,250);
ctx.lineTo(200,250);
ctx.lineTo(50,350);
ctx.lineTo(230,350);
ctx.lineTo(230,480);
ctx.lineTo(270,480);
ctx.lineTo(270,350);
ctx.lineTo(450,350);
ctx.lineTo(300,250);
ctx.lineTo(420,250);
ctx.lineTo(300,150);
ctx.lineTo(390,150);
// ctx.lineTo(250,50);
ctx.closePath();//封闭路径
ctx.lineWidth = 1.0;//设置线宽
ctx.strokeStyle = "skyblue";//设置线的颜色
ctx.stroke();//绘制
ctx.fillStyle = "skyblue";//设置填充颜色
ctx.fill();//填充图形
</script>
</body>
</html>
案例2:umbrella雨伞
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>雨伞</title>
<style>
*{
margin: 0;
padding: 0;
}
#canvas{
border: 1px solid gray;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
//1、获取画布
var canvas = document.querySelector("#canvas");
//2、获取上下文对象CanvasRenderingContext2D,即画笔
var umbrella = canvas.getContext("2d");
canvas.width = 400;
canvas.height = 400;
//3、绘制直线
umbrella.beginPath();//开始绘制,开始路径规划(开始了一个新状态,新线径)
umbrella.arc(200,150,100,0,Math.PI,true);
umbrella.closePath();
umbrella.lineWidth = 3.0;//设置线宽
umbrella.strokeStyle = "#ff5857";//设置线的颜色
umbrella.stroke();//绘制
umbrella.fillStyle = "#ff5857"
umbrella.fill();
umbrella.beginPath();//开始绘制,开始路径规划(开始了一个新状态,新线径)
/*这里着重强调下 beginPath: 核心的作用是将不同绘制的形状进行隔离,
*每次执行此方法,表示重新绘制一个路径,
*跟之前的绘制的墨迹可以进行分开样式设置和管理。
*新状态可以继承之前状态的样式,但是当前状态设置的所有样式只能用于当前状态。
*/
umbrella.moveTo(200,150);
umbrella.lineTo(200,280);
umbrella.arc(180,285,20,0,Math.PI,false);
umbrella.lineWidth = 3.0;//设置线宽
umbrella.strokeStyle = "#ff5857";//设置线的颜色
umbrella.stroke();//绘制
</script>
</body>
</html>