填充图案
<!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>
<style>
#canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="canvas" width="300" height="150"></canvas>
<script>
// 获取canvas元素
var canvas = document.getElementById("canvas");
// 获取渲染上下文 getContext
var ctx = canvas.getContext("2d");//也可以称之为画笔
// 1.矩形里面填充颜色 fillRect
// 2.填充图案 createPattern
var img = new Image();//实例一个图片实例
img.src = './1.jpeg';
img.onload = function() {
var pattern = ctx.createPattern(img, 'no-repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 300, 150);
}
</script>
</body>
</html>
canvas之间的套用
- 把套用的canvas可以理解为另一种图案
<canvas id="canvas" width="600" height="600"></canvas>
<canvas id="canvas2" width="200" height="200"></canvas>
<script>
// 获取canvas元素
var canvas = document.getElementById("canvas");
var canvas2 = document.getElementById("canvas2");
// 获取渲染上下文 getContext
var ctx = canvas.getContext("2d");//也可以称之为画笔
var ctx2 = canvas2.getContext("2d");//也可以称之为画笔
ctx2.fillRect(0,0,50,50)
// 1.矩形里面填充颜色 fillRect
// 2.填充图案 createPattern
var img = new Image();//实例一个图片实例
img.src = './1.jpeg';
img.onload = function() {
var pattern = ctx.createPattern(canvas2, 'no-repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 50, 50);
}
</script>
渐变
- 线性渐变 & 径向渐变
// => 线性渐变
<canvas id="canvas" width="600" height="600"></canvas>
<script>
// 获取canvas元素
var canvas = document.getElementById("canvas");
// 获取渲染上下文 getContext
var ctx = canvas.getContext("2d");//也可以称之为画笔
// 起点坐标 终点坐标
var gradient = ctx.createLinearGradient(0, 0, 300, 0);
// addColorStop([0-1], 颜色'lightblue') 增加站点
gradient.addColorStop(0, 'lightblue');
gradient.addColorStop(1, 'white');
// 还需要把油漆桶填充为 gradient
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 300, 300)
</script>
<canvas id="canvas" width="600" height="600"></canvas>
<script>
// 获取canvas元素
var canvas = document.getElementById("canvas");
// 获取渲染上下文 getContext
var ctx = canvas.getContext("2d");//也可以称之为画笔
// 增加站点
gradient.addColorStop(0, 'lightblue');
gradient.addColorStop(0.5, 'lightpink');
gradient.addColorStop(1, 'white');
// 还需要把油漆桶填充为 gradient
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 300, 300);
</script>
阴影
- shadowColor
<canvas id="canvas" width="600" height="600"></canvas>
<script>
// 获取canvas元素
var canvas = document.getElementById("canvas");
// 获取渲染上下文 getContext
var ctx = canvas.getContext("2d");//也可以称之为画笔
ctx.shadowColor = "#00f";//阴影颜色
ctx.shadowOffsetX = 15;// 横向偏移量
ctx.shadowOffsetY = 15;//纵向偏移量
ctx.shadowBlur = 15;//模糊值
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 150, 100);
</script>
添加文本
- fillText(text, x, y);
<canvas id="canvas" width="600" height="600"></canvas>
<script>
// 获取canvas元素
var canvas = document.getElementById("canvas");
// 获取渲染上下文 getContext
var ctx = canvas.getContext("2d");//也可以称之为画笔
ctx.font = "50px sans-serif";//字体大小 字体类型设置
ctx.fillText("hello canvas", 100, 50);//默认大小会比较小
</script>
lineCap(线的帽子哈哈哈)
<canvas id="canvas" width="600" height="600"></canvas>
<script>
// 获取canvas元素
var canvas = document.getElementById("canvas");
// 获取渲染上下文 getContext
var ctx = canvas.getContext("2d");//也可以称之为画笔
ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineWidth = 15;
// 加上帽子
ctx.lineCap = "round";//round半圆的帽子 square正方形 butt无头
ctx.lineTo(150, 30);
ctx.stroke();
</script>
lineJoin
- 2条线之间连接的一个样式
- 默认的连接方式是尖角的
<canvas id="canvas" width="600" height="600"></canvas>
<script>
// 获取canvas元素
var canvas = document.getElementById("canvas");
// 获取渲染上下文 getContext
var ctx = canvas.getContext("2d");//也可以称之为画笔
ctx.beginPath();
ctx.moveTo(30, 200);
ctx.lineWidth = 20;
ctx.lineJoin = 'bevel';//躺平尖角(被磨平了棱角哈哈) 斜接
//round 圆角
//ctx.lineJoin = "round"
ctx.lineTo(150, 30);
ctx.lineTo(300, 200);
ctx.stroke();
</script>
- miterLimit概念的理解
类比杯子,水满了溢出就是杯子的样子; 水不足,就保持原状态
