canvas
canvas 画线
<canvas id="can" width="500px" height="300px"></canvas>
注意：只能在行间样式设置大小，不能通过 css
var canvas = document.getElementById("can"); //画布
var ctx = canvas.getContext("2d"); //画笔
ctx.moveTo(100, 100); //起点
ctx.lineTo(200, 100); //终点
ctx.stroke(); //画上去
ctx.closePath(); // 连续线，形成闭合
ctx.fill(); //填充
ctx.lineWidth = 10; // 设置线的粗细 写在哪，都相当于写在moveto的后面？？？？咋不管用
想实现一个细，一个粗
一个图形，一笔画出来的，只能一个粗细，想实现，必须开启新图像
ctx.beginPath();
closePath()是图形闭合，不是一个图，不能闭合
canvas 画矩形
ctx.rect(100, 100, 150, 100);
ctx.stroke();
ctx.fill();
简化
ctx.strokeRect(100, 100, 200, 100); //矩形
ctx.fillRect(100, 100, 200, 100); //填充矩形
小方块下落
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
canvas {
width: 500px;
height: 300px;
border: 1px solid;
}
</style>
</head>
<body>
<canvas id="can" width="500px" height="300px"></canvas>
<!-- -->
<script>
var canvas = document.getElementById("can"); //画布
var ctx = canvas.getContext("2d"); //画笔
var height = 100;
var timer = setInterval(function () {
ctx.clearRect(0, 0, 500, 300); //橡皮擦功能，清屏
ctx.strokeRect(100, height, 50, 50);
height += 5; //每次画的新的，但是旧的没删除，所以要加上清屏
}, 1000 / 30);
</script>
</body>
</html>
作业：自由落体
canvas 画圆
<script>
var canvas = document.getElementById("can"); //画布
var ctx = canvas.getContext("2d"); //画笔
// 圆心(x,y)，半径(r)，弧度(起始弧度，结束弧度),方向
ctx.arc(100, 100, 50, 0, Math.PI * 1.8, 0); //顺时针0;逆时针1
ctx.lineTo(100, 100);
ctx.closePath();
ctx.stroke();
</script>
画圆角矩形
<script>
var canvas = document.getElementById("can"); //画布
var ctx = canvas.getContext("2d"); //画笔
// ABC为矩形端点
// B(x,y),C(x,y),圆角大小(相当于border-radius)
ctx.moveTo(100, 110);
ctx.arcTo(100, 200, 200, 200, 10);
ctx.arcTo(200, 200, 200, 100, 10);
ctx.arcTo(200, 100, 100, 100, 10);
ctx.arcTo(100, 100, 100, 200, 10);
ctx.stroke();
</script>
canvas 贝塞尔曲线
贝塞尔曲线
var canvas = document.getElementById("can"); //画布
var ctx = canvas.getContext("2d"); //画笔
ctx.beginPath();
ctx.moveTo(100, 100);
// ctx.quadraticCurveTo(200, 200, 300, 100);二次
// ctx.quadraticCurveTo(200, 200, 300, 100, 400 200); 三次
ctx.stroke();
波浪
注意：初始化
ctx.beginPath();
波浪 demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
canvas {
width: 500px;
height: 300px;
border: 1px solid;
}
</style>
</head>
<body>
<canvas id="can" width="500px" height="300px"></canvas>
<!-- -->
<script>
var width = 500;
var height = 300;
var offset = 0;
var num = 0;
var canvas = document.getElementById("can"); //画布
var ctx = canvas.getContext("2d"); //画笔
setInterval(function () {
ctx.clearRect(0, 0, 500, 300);
ctx.beginPath();
ctx.moveTo(0 + offset - 500, height / 2);
ctx.quadraticCurveTo(
width / 4 + offset - 500,
height / 2 + Math.sin(num) * 120,
width / 2 + offset - 500,
height / 2
);
ctx.quadraticCurveTo(
(width / 4) * 3 + offset - 500,
height / 2 - Math.sin(num) * 120,
width + offset - 500,
height / 2
);
// 整体向左平移整个宽度形成完整的衔接
ctx.moveTo(0 + offset, height / 2);
ctx.quadraticCurveTo(
width / 4 + offset,
height / 2 + Math.sin(num) * 120,
width / 2 + offset,
height / 2
);
ctx.quadraticCurveTo(
(width / 4) * 3 + offset,
height / 2 - Math.sin(num) * 120,
width + offset,
height / 2
);
ctx.stroke();
offset += 5;
offset %= 500;
num += 0.02;
}, 1000 / 30);
</script>
</body>
</html>
坐标平移旋转与缩放
旋转平移
<script>
var canvas = document.getElementById("can"); //画布
var ctx = canvas.getContext("2d"); //画笔
ctx.beginPath();
ctx.rotate(Math.PI / 6); //根据画布的原点进行旋转
// 要想不根据画布原点,则translate坐标系平移
// ctx.translate(100, 100);坐标原点在(100,100),此时配套旋转
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.stroke();
</script>
缩放
<script>
var canvas = document.getElementById("can"); //画布
var ctx = canvas.getContext("2d"); //画笔
ctx.beginPath();
ctx.scale(2, 2); //x乘以他的系数,y乘以他的系数
ctx.strokeRect(100, 100, 100, 100);
</script>
canvas 的 save 和 restore
不想让其他的受到之前设置的影响
<script>
var canvas = document.getElementById("can"); //画布
var ctx = canvas.getContext("2d"); //画笔
ctx.save(); //保存坐标系的平移数据，缩放数据，旋转数据
ctx.beginPath();
ctx.translate(100, 100);
ctx.rotate(Math.PI / 4);
ctx.strokeRect(0, 0, 100, 50);
ctx.beginPath();
ctx.restore(); //一旦restore，就恢复save时候的状态
ctx.fillRect(100, 0, 100, 50);
</script>
canvas 背景填充
<script>
var canvas = document.getElementById("can"); //画布
var ctx = canvas.getContext("2d"); //画笔
var img = new Image();
img.src = "file:///C:/Users/f1981/Desktop/source/pic3.jpeg";
img.onload = function () {
//因为图片异步加载
ctx.beginPath();
ctx.translate(100, 100); //改变坐标系的位置
var bg = ctx.createPattern(img, "no-repeat");
// 图片填充，是以坐标系原点开始填充的
// ctx.fillStyle = "blue";
ctx.fillStyle = "bg";
ctx.fillRect(0, 0, 200, 100);
};
</script>
图片疑难问题 探索 open in live server 只能打开同目录下的 img
线性渐变
<script>
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");
ctx.beginPath();
var bg = ctx.createLinearGradient(0, 0, 200, 200);
bg.addColorStop(0, "white"); //数字为0-1之间
// bg.addColorStop(0.5, "blue");
bg.addColorStop(1, "black");
ctx.fillStyle = bg;
ctx.translate(100, 100); //起始点依旧是坐标系原点
ctx.fillRect(0, 0, 200, 200);
</script>
canvas 辐射渐变
<script>
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");
ctx.beginPath();
// var bg = ctx.createRadialGradient(x1,y1,r1,x2,y2,r2);起始圆，结束圆
var bg = ctx.createRadialGradient(100, 100, 0, 100, 100, 100);
// var bg = ctx.createRadialGradient(100, 100, 100, 100, 100, 100);起始圆里面的颜色全是开始的颜色
bg.addColorStop(0, "red");
bg.addColorStop(0.5, "green");
bg.addColorStop(1, "blue");
ctx.fillStyle = bg;
ctx.fillRect(0, 0, 200, 200);
</script>
canvas 阴影
<script>
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.shadowColor = "blue";
ctx.shadowBlur = 20;
ctx.shadowOffsetX = 15;
ctx.shadowOffsetY = 15;
ctx.strokeRect(0, 0, 200, 200);
</script>
canvas 渲染文字
<script>
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.strokeRect(0, 0, 200, 200);
ctx.fillStyle = "red";
ctx.font = "30px Georgia"; //对stroke和fill都起作用
ctx.strokeText("panda", 200, 100); //文字描边
ctx.fillText("monkey", 200, 250); //文字填充
</script>
canvas 线端样式
<script>
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.lineWidth = 15;
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(100, 130);
ctx.lineCap = "square"; //butt round
ctx.lineJoin = "miter"; //线接触时候// round bevel miter(miterLimit)
ctx.miterLimit = 5;
ctx.stroke();
</script>
