<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<title></title>
</head>
<body>
<canvas id="canvas"
width="500"
height="150"
style="border: aqua 1px solid;"></canvas>
<canvas id="ex2"
width="500"
height="150"
style="border: aqua 1px solid;margin-top: 1.25rem;"></canvas>
<!-- 绘制曲线 -->
<canvas id="ex3"
width="500"
height="150"
style="border: aqua 1px solid;margin-top: 1.25rem;"></canvas>
<script type="text/javascript">
window.onload = function () {
drawExamples()
drawRoute()
textShadow()
}
// 绘制矩形
function drawExamples () {
// . 获取canvas元素的引用
var canvas = document.getElementById('canvas')
// 从canvas元素中获取一个2D context
var context = canvas.getContext("2d");
// 定义用蓝色填充矩形
context.fillStyle = "#ff0000";
// 绘制100 * 100 像素填充的矩形 前两个值X轴和Y轴的位置 context.fillRect(x,y,width,height);
context.fillRect(10, 10, 100, 100);
// 绘制一个矩形。请用蓝色的笔触颜色（边框颜色）
context.strokeStyle = "#0000ff";
// 用宽度为 10 像素的线条来绘制矩形：(边框宽度)
context.lineWidth = 5;
// strokeRect()方法用于绘制一个描边矩形，没有填充色
context.strokeRect(10, 10, 100, 100);
context.strokeRect(30, 20, 120, 110);
// clearRect()函数用于在Canvas中清除一个矩形区域（橡皮擦）
context.clearRect(50, 30, 110, 35);
}
// 绘制路径
function drawRoute () {
var ex2 = document.getElementById('ex2')
// 从canvas元素中获取一个2D context
var context = ex2.getContext("2d");
// beginPath() 方法开始一条路径，或重置当前的路径。
context.beginPath();
// moveTo() 方法把路径移动到画布中的指定点，不创建线条。(线条的起点)
context.moveTo(10, 10);
// lineTo() 方法添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）
context.lineTo(60, 50);
context.lineTo(110, 50);
context.lineTo(10, 10);
// stroke() 方法在画布上绘制确切的路径。
//context.lineWidth设置线条的宽度
context.lineWidth = 10;
// 2D上下文的lineJoin属性用于定义两条线条连接处的点如何绘制（连接点样式）有三个属性[miter,bevel,round]
// context.lineJoin = "miter";
// context.lineJoin = "bevel";
context.lineJoin = "round";
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(100, 10);
context.lineTo(150, 50);
context.lineTo(200, 50);
context.lineTo(100, 10);
context.fill();
context.closePath();
}
// 绘制曲线
// 绘制文字阴影
function textShadow() {
var canvas = document.getElementById("ex3");
var context = canvas.getContext("2d");
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 4;
context.shadowColor = "#666666"; //or use rgb(red, green, blue)
context.fillStyle = "#000000";
context.fillRect(10,10, 50, 50);
context.fillStyle = "#000066";
context.font = "30px Arial";
context.fillText("HTML5 Canvas Shadow", 10,120);
}
</script>
</body>
</html>