H5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
创建 Canvas
<canvas id="myCanvas" width="400px" height="400px"></canvas>
基本用法
(1)获取canvas对象-->获取画布，通过document.getElementById()等方法取得canvas对象
var canvas = document.getElementById("myCanvas");
//或者
var canvas = document.querySelector('canvas');
(2)取得上下文(context)-->获取画笔, 图形上下文是一个封装了很多绘图功能的对象，参数只能是“2d”
var context = canvas.getContext('2d');
(3)定义填充样式
context.fillStyle = 'red';
(4)绘制填充图形
context.fillStyle(10,10,100,100)
//第一个参数是x轴开始位置，第二个参数是y轴开始位置，第三个参数是绘制图形的宽，第四个位置是绘制图形的高
实例1 --绘制填充矩形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload=function(){
var canvas=document.querySelector('canvas');
var context=canvas.getContext('2d');
context.fillStyle='red';
context.fillRect(0,0,200,200);
// 清除一部分区域
context.clearRect(0,0,50,50);
}
</script>
</head>
<body>
<canvas width="400px" height="400px"></canvas>
</body>
</html>
实例2--绘制轮廓矩形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload=function(){
var canvas=document.querySelector('canvas');
var context=canvas.getContext('2d');
context.strokeStyle='pink';
// 设置轮廓矩形线宽
context.lineWidth = 18;
// 绘制轮廓矩形
context.strokeRect(10,10,200,200); //如果把原点设置为(0,0)，就会有两条边的线宽不能表现出来，因为原点位于线宽的中间
}
</script>
</head>
<body>
<canvas id="myCanvas" width="400px" height="400px"></canvas>
</body>
</html>
实例3--绘制填充圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload=function(){
var canvas=document.querySelector('canvas');
var context=canvas.getContext('2d');
context.beginPath();
// x轴开始位置 y轴开始位置 圆半径 开始弧度 结束弧度 圆的方向是否为逆时针方向
context.arc(100,100,50,0,Math.PI,true);
// 修改填充样式
context.lineTo(100,100);
// 结束路径
context.closePath();
context.fillStyle='cyan';
context.fill();
}
</script>
</head>
<body>
<canvas width="400px" height="400px"></canvas>
</body>
</html>
实例4--绘制轮廓圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload=function(){
// 获取画布
var canvas=document.querySelector('canvas');
var context=canvas.getContext('2d');
context.beginPath();
// x轴开始位置 y轴开始位置 圆半径 开始弧度 结束弧度 圆的方向是否为逆时针方向
context.arc(100,100,50,0,Math.PI);
context.closePath();
// 修改轮廓样式
context.strokeStyle='red';
context.stroke();
}
</script>
</head>
<body>
<canvas width="400px" height="400px"></canvas>
</body>
</html>
实例5--圆的移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function () {
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
var bubble = {
x: 100,
y: 100,
r: 50,
color: 'pink'
}
// 封装绘制方法
draw(bubble);
setInterval(function () {
// 清除画布
context.clearRect(0, 0, 400, 400);
move(bubble)
}, 200)
move(bubble);
function draw(bublle) {
context.beginPath();
context.arc(bubble.x, bubble.y, bubble.r, 0, Math.PI * 2);
// 绘制填充圆
context.fillStyle = bubble.color;
context.fill();
}
// 圆移动方法
function move(bubble){
bubble.x+=5;
bubble.y+=5;
draw(bubble);
}
}
</script>
</head>
<body>
<canvas width="400px" height="400px"></canvas>
</body>
</html>
