canvas
1.是 HTML5 新增的元素,用于绘制图形
2.canvas 的元素类型是 inline-block
3.不兼容 ie9 以下(最好在外面的套一个 div 宽度设置 canvas 等高)
4.画布的大小设置 使用属性 不使用样式
let canvas =document.getElementById("#canvasStyle");
let ctx = canvas.getContext('2d'); //平面绘图
// 立体绘图 参数是 'webgl' 3d有一个three.js
// ctx 上下文对象
// 矩形绘制
ctx.fillRect(x,y,width,height)
ctx.strokeRect(x,y,width,height)
-
api
-
fill() 填充绘制
-
stroke() 边框绘制
-
ctx.fillStyle 填充样式
-
ctx.strokeStyle 边框样式
-
ctx.lineWidth 图形边框宽度
-
ctx.fillRect(x,y,width,height) 绘制填充矩形 x,y 相对的位置
-
ctx.strokeRect(x,y,width,height) 绘制边框矩形
-
ctx.clearRect(x,y,width,height); 清空一个矩形 唯一一个可以清除内容的函数
-
阴影
shadowColor | 设置或返回用于阴影的颜色。 |
---|---|
shadowBlur | 设置或返回用于阴影的模糊级别。 |
shadowOffsetX | 设置或返回阴影与形状的水平距离。 |
shadowOffsetY | 设置或返回阴影与形状的垂直距离。 |
线条样式
属性 | 描述 |
---|---|
lineCap | 设置或返回线条的结束端点样式。 |
lineJoin | 设置或返回两条线相交时,所创建的拐角类型。 |
lineWidth | 设置或返回当前的线条宽度。 |
miterLimit | 设置或返回最大斜接长度。 |
路径
方法 | 描述 |
---|---|
fill() | 填充当前绘图(路径)。 |
stroke() | 绘制已定义的路径。 |
beginPath() | 起始一条路径,或重置当前路径。 |
moveTo() | 把路径移动到画布中的指定点,不创建线条。 |
closePath() | 创建从当前点回到起始点的路径。 |
lineTo() | 添加一个新点,然后在画布中创建从该点到最后指定点的线条。 |
clip() | 从原始画布剪切任意形状和尺寸的区域。 |
quadraticCurveTo() | 创建二次贝塞尔曲线。 |
bezierCurveTo() | 创建三次贝塞尔曲线。 |
arc() | 创建弧/曲线(用于创建圆形或部分圆)。 |
arcTo() | 创建两切线之间的弧/曲线。 |
isPointInPath() | 如果指定的点位于当前路径中,则返回 true,否则返回 false。 |
-
arc()
x 圆的中心的 x 坐标。 y 圆的中心的 y 坐标。 r 圆的半径。 sAngle 起始角,以弧度计(弧的圆形的三点钟位置是 0 度)。 eAngle 结束角,以弧度计。 counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。 let canvas = document.getElementById("canvasStyle"); let ctx = canvas.getContext("2d"); //平面绘图 ctx.beginPath(); //开始路径闭合 ctx.strokeStyle = "blue"; ctx.arc(250, 250, 100, 0, Math.PI); ctx.stroke(); ctx.closePath(); //结束路径 ctx.beginPath(); ctx.strokeStyle = "yellow"; ctx.arc(250, 250, 100, 0, Math.PI, true); ctx.stroke(); ctx.closePath();
arc例子:
球在画布中乱跑
let x = 20,
y = 20,
dx = 2,
dy = 3.4;
function cricke(x, y) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(x, y, 20, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();
}
setInterval(function () {
if (x + dx > canvas.width - 20 || x + dx < 20) {
dx = -dx;
}
if (y + dy > canvas.width - 20 || y + dy < 20) {
dy = -dy;
}
x += dx;
y += dy;
cricke(x, y);
}, 10);
-
关于 closepath 的正确理解
ctx.strokeStyle = "green"; ctx.moveTo(20,20); // 创建起始点 或者换成 ctx.lineTo(20, 20);也可以 ctx.lineTo(20, 100); ctx.lineTo(70, 100); ctx.closePath(); ctx.stroke();
1.有 closePath() 的时候
2.没有closePath()
转换
方法 | 描述 |
---|---|
scale() | 缩放当前绘图至更大或更小。 |
rotate() | 旋转当前绘图。 |
translate() | 重新映射画布上的 (0,0) 位置。 |
transform() | 替换绘图的当前转换矩阵。 |
setTransform() | 将当前转换重置为单位矩阵。然后运行 transform()。 |
文本
属性 | 描述 |
---|---|
font | 设置或返回文本内容的当前字体属性。 |
textAlign | 设置或返回文本内容的当前对齐方式。 |
textBaseline | 设置或返回在绘制文本时使用的当前文本基线。 |
方法 | 描述 |
---|---|
fillText() | 在画布上绘制"被填充的"文本。 |
strokeText() | 在画布上绘制文本(无填充)。 |
measureText() | 返回包含指定文本宽度的对象。 |
图像绘制
方法 | 描述 |
---|---|
drawImage() | 向画布上绘制图像、画布或视频。 |
1、例子
let canvas = document.getElementById("canvasStyle");
let btn = document.getElementById("btn");
let ctx = canvas.getContext("2d"); //平面绘图
btn.addEventListener("click", function () {
// 创建一张图片标签
let img = document.createElement("img");
img.src = "../image/1.jpeg";
img.onload = function () {
ctx.drawImage(img, 10, 10, 400, 400); //会出现一个问题就是者条语句会提前执行
// 解决方法是在图片加载完成了在进行这局话
};
});
图片合成
<body>
<div id="app">
<button id="btn">点击</button>
</div>
<script>
let App = document.getElementById("app");
let btn = document.getElementById("btn");
// 第一步创建一个对象
let canvas = document.createElement("canvas");
App.appendChild(canvas);
canvas.width = 300;
canvas.height = 300;
ctx = canvas.getContext("2d");
// 第二部加载图片
let img1 = new Image();
let img2 = new Image();
img1.src = "../image/1.jpeg";
img2.src = "../image/2.png";
// 封装成一个promise对象 异步解决方案
let pm1 = new Promise((reslove, reject) => {
img1.onload = () => {
reslove();
};
});
let pm2 = new Promise((reslove, reject) => {
img2.onload = () => {
reslove();
};
});
// 让其同时执行
let dar = Promise.all([pm1, pm2]).then(() => {
ctx.drawImage(img1, 0, 0, canvas.width, canvas.height);
ctx.drawImage(img2, canvas.width - 150, 30, 50, 50);
});
</script>
</body>