canvas元素
可被用来通过JavaScript来绘制图形及图形动画
属性
- height 该元素所占用的高度,以css像素px表示,默认为150
- moz-opaque 设置是否半透明
- width 该元素所占用空间的宽度 ,默认是300
使用canvas绘制直线
- ctx,linejoin:指定两条交点的样式
- 可选值;round,miter,bevel
- ctx.lineCap:设置线条末端的类型
- 可选值:square,round
<canvas width="600" height="400"> 当前浏览器不支持画布</canvas>
//获取canvas的dom对象
var cas = document.querySelector('canvas');
//获取向下文对象
var ctx = cas.getContext('2d');
//指定画笔的坐标
ctx.moveTo(100, 100);
//指定终点
ctx.lineTo(300, 100);
//指定线条的颜色 16进制和rgba都支持
//绘制之前指定 颜色 属性
ctx.strokeStyle = "green";
//指定线条的宽度 ,不能写px单位
ctx.lineWidth = 10;
//描边的方式画直线
ctx.stroke();
移动笔
该功能是一个会成为上述路径列表的一部分moveTo()
您可能最能想到的是将笔或铅笔从一张纸上的一个位置提起,然后放在另一张纸上。
moveTo(x, y)
移动笔由指定的坐标x
和y
。
初始化或beginPath()
调用画布时,通常将需要使用该moveTo()
函数将起点放置在其他位置。我们还可以moveTo()
用来绘制未连接的路径。看看下面的笑脸。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body onload="draw();">
<canvas id="canvas" width="400" height="400"></canvas>
</body>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
ctx.moveTo(110, 75);
ctx.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise)
ctx.moveTo(65, 65);
ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Left eye
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Right eye
ctx.stroke();
}
}
</script>
</html>
运行结果:
线数
lineTo()方法来绘制直线
lineTo(x, y)
绘制一条从当前绘图位置到所指定的位置的线x
和y
。
案例:
绘制两个三角形一个实心的一个空心的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body onload="draw();">
<canvas id="canvas" width="400" height="400"></canvas>
</body>
<script type="application/javascript">
function draw() {
var canvas=document.getElementById('canvas');
if(canvas.getContext){
var ctx=canvas.getContext('2d');
//绘制实心的
ctx.beginPath();
ctx.moveTo(25,25)
ctx.lineTo(105,25);
ctx.lineTo(25,105);
// 绘制实心的
ctx.fill();
//绘制空心的
ctx.beginPath();
ctx.moveTo(125, 125);
ctx.lineTo(125, 45);
ctx.lineTo(45, 125);
// 连接起始点
ctx.closePath();
//绘制形状
ctx.stroke();
}
}
</script>
</html>
效果如下:
绘制一个三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画布的基本使用</title>
<style>
canvas {
border: 1px red solid;
}
</style>
</head>
<body>
<!-- 修改画布的尺寸,使用属性的方式 -->
<canvas width="600" height="400"> 当前浏览器不支持画布</canvas>
</body>
<script>
//获取canvas的dom对象
var cas = document.querySelector('canvas');
//获取向下文对象
var ctx = cas.getContext('2d');
//指定画笔的坐标
ctx.moveTo(100, 100);
//指定终点
ctx.lineTo(300, 100);
ctx.lineTo(300, 300);
ctx.lineTo(100, 100);
// //指定线条末端的类型
// ctx.lineCap = 'round';//圆角
//指定两条线交点的样式
// ctx.lineJoin = 'bevel';//默认是直角
//指定线条的颜色 16进制和rgba都支持
//绘制之前指定 颜色 属性
ctx.strokeStyle = "green";
//指定线条的宽度 ,不能写px单位
// ctx.lineWidth = 10;
//描边的方式画直线
ctx.stroke();
</script>
</html>
画一个矩形
//获取canvas的dom对象
var cas = document.querySelector('canvas');
//获取向下文对象
var ctx = cas.getContext('2d');
//指定画笔的坐标
ctx.moveTo(100, 100);
//指定终点
//画矩形。四个点,连接
ctx.lineTo(300, 100);
ctx.lineTo(300, 300);
ctx.lineTo(100, 300);
ctx.lineTo(100, 100);
//指定线条末端的类型
ctx.lineCap = 'round';//圆角
//指定线条的颜色 16进制和rgba都支持
//绘制之前指定 颜色 属性
ctx.strokeStyle = "green";
//指定线条的宽度 ,不能写px单位
ctx.lineWidth = 10;
//描边的方式画直线
ctx.stroke();
使用rect方法绘制矩形
- rect(x,y,width,height)
- x:左上角x坐标
- y:左上角的y坐标
- width:宽度
- height:高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas width="600" height="400" id="cas"></canvas>
</body>
<script>
var cas = document.querySelector('#cas');
var ctx = cas.getContext('2d');
//绘制矩形
//ctx.rect(左上角x坐标,左上角的y坐标,宽度,高度);
ctx.rect(0, 0, 100, 100);
ctx.lineWidth = 5;
ctx.strokeStyle = 'yellow';
//开始绘制
// ctx.stroke();
//绘制实心矩形
//填充颜色
ctx.fillStyle = 'orange';
ctx.fill();
</script>
</html>
使用canvas绘制圆形
- arc(x,y,r,start,end,flag)
- x:圆心x坐标
- y:圆心y坐标
- r:半径
- start:起始角度
- end:终止角度
- flag:False=顺时针 true=逆时针
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas width="600" height="400" id="myCanvas"> 当前浏览器不支持画布</canvas>
</body>
<script>
var cas = document.getElementById('myCanvas');
var ctx = cas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 75, 60, 0, 2 * Math.PI);
//指定颜色
ctx.fillStyle = "red";
//绘制空心圆形
// ctx.stroke();
//绘制实心圆形
ctx.fill();
</script>
</html>
vas>
```