常用方法
<dl>
<dt>常用方法</dt>
<dd>
<dl>
<dt>直线(路径)</dt>
<dd>
<p>context.lineTo(x, y)</p>
<canvas id="line" width="800" height="100"></canvas>
<script>
{
const canvas = document.querySelector("#line");
const context = canvas.getContext("2d");
context.fillStyle = "#000";
context.beginPath();
context.moveTo(20, 50);
context.lineTo(80, 50);
context.stroke();
context.beginPath(); //开始画新的路径
context.moveTo(120, 20);
context.lineTo(120, 80);
context.stroke();
context.beginPath();
context.moveTo(220, 20);
context.lineTo(220, 80);
context.lineTo(250, 80);
context.stroke();
context.beginPath();
context.moveTo(320, 20);
context.lineTo(320, 80);
context.lineTo(350, 80);
context.closePath(); //闭合路径
context.stroke();
}
</script>
</dd>
<dt>矩形</dt>
<dd>
<p>矩形(路径):context.rect(x, y, width, height)</p>
<p>填充矩形:context.fillRect(x, y, width, height)</p>
<p>描边矩形:context.strokeRect(x, y, width, height)</p>
<canvas id="rect" width="800" height="100"></canvas>
<script>
{
const canvas = document.querySelector("#rect");
const context = canvas.getContext("2d");
context.fillStyle = "#000";
context.lineWidth = 1;
// 矩形
context.rect(0, 0, 80, 80);
context.stroke();
// 矩形填充
context.fillRect(100, 0, 80, 80);
// 5像素宽矩形描边
context.lineWidth = 5;
context.strokeRect(200, 0, 80, 80);
}
</script>
</dd>
<dt>圆弧 | 椭圆</dt>
<dd>
<p>正圆弧(路径):context.arc(x, y, radius, startAngle, endAngle [, anticlockwise])</p>
<p>椭圆(路径):context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)</p>
<p>给路径添加圆弧(路径):context.arcTo(cpx1, cpy1, cpx2, cpy2, radius)</p>
<p>贝塞尔曲线(路径):context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)</p>
<canvas id="arc" width="800" height="100"></canvas>
<script>
{
const canvas = document.querySelector("#arc");
const context = canvas.getContext("2d");
context.fillStyle = "#000";
// 顺时针绘制0到1/4弧度圆弧
context.beginPath();
context.arc(50, 50, 40, 0, Math.PI / 2);
context.stroke();
// 逆时针绘制0到1/4弧度圆弧
context.beginPath();
context.arc(150, 50, 40, 0, Math.PI / 2, true);
context.stroke();
// 绘制完整圆
context.beginPath();
context.arc(250, 50, 40, 0, 2 * Math.PI);
context.stroke();
// 绘制椭圆 旋转45°
context.beginPath();
context.ellipse(350, 50, 50, 40, Math.PI / 4, 0, 2 * Math.PI);
context.stroke();
// 绘制椭圆 旋转45°
context.beginPath();
context.ellipse(450, 50, 50, 50, Math.PI / 2, 0, Math.PI);
context.stroke();
// 给路径添加圆弧，需要指定控制点和半径，常用于绘制标准圆角
context.beginPath();
context.moveTo(500, 50);
context.arcTo(550, 100, 600, 50, 40);
context.stroke();
}
</script>
</dd>
<dt>贝塞尔曲线</dt>
<dd>
<p>贝塞尔曲线(路径):context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)</p>
<p>二次贝塞尔曲线(路径):context.quadraticCurveTo(cpx, cpy, x, y);</p>
<canvas id="bezier" width="800" height="100"></canvas>
<script>
{
const canvas = document.querySelector("#bezier");
const context = canvas.getContext("2d");
context.fillStyle = "#000";
// 贝塞尔曲线
context.beginPath();
context.moveTo(0, 50);
context.bezierCurveTo(30, 75, 60, 40, 90, 60);
context.stroke();
context.beginPath();
context.moveTo(100, 50);
context.bezierCurveTo(130, 65, 160, 55, 190, 60);
context.stroke();
//二次贝塞尔曲线
context.beginPath();
context.moveTo(200, 50);
context.quadraticCurveTo(250, 75, 290, 30);
context.stroke();
}
</script>
</dd>
<dt>Image</dt>
<dd>
<p>context.drawImage(image, dx, dy);</p>
<p>context.drawImage(image, dx, dy, dWidth, dHeight);</p>
<p>context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);</p>
<p>context.getImageData(sx, sy, sWidth, sHeight);</p>
<p>context.putImageData(imagedata, dx, dy);</p>
<p>context.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);</p>
<p>context.createImageData(width, height);</p>
<canvas id="image" width="100" height="100"></canvas>
<canvas id="image1" width="100" height="100"></canvas>
<canvas id="image2" width="100" height="100"></canvas>
<script>
{
const canvas = document.querySelector("#image");
const context = canvas.getContext("2d");
const canvas1 = document.querySelector("#image1");
const context1 = canvas1.getContext("2d");
const canvas2 = document.querySelector("#image2");
const context2 = canvas2.getContext("2d");
const image = new Image();
image.onload = function () {
context.drawImage(image, 0, 0);
context1.drawImage(image, 0, 0, 100, 100);
const val = Math.min(this.width, this.height);
context2.drawImage(image, 0, 0, val, val, 0, 0, 100, 100);
// 然后获取区域数据
const imageData = context2.getImageData(25, 25, 75, 75);
const length = imageData.data.length;
for (let index = 0; index < length; index += 4) {
const r = imageData.data[index];
const g = imageData.data[index + 1];
const b = imageData.data[index + 2];
// 计算灰度
const gray = r * 0.299 + g * 0.587 + b * 0.114;
imageData.data[index] = gray;
imageData.data[index + 1] = gray;
imageData.data[index + 2] = gray;
}
context2.putImageData(imageData, 25, 25);
const imageData1 = context1.createImageData(80, 50);
for (let x = 1; x <= 80; x += 5) {
for (let y = 1; y <= 50; y += 5) {
const index = 4 * ((y - 1) * 80 + (x - 1));
// 变为绿色，色值依次是0, 128, 0, 256
imageData1.data[index] = 0;
imageData1.data[index + 1] = 128;
imageData1.data[index + 2] = 0;
imageData1.data[index + 3] = 256;
}
}
context1.putImageData(imageData1, 25, 25, 0, 0, 50, 50);
};
image.src = "../images/1.jpg";
}
</script>
</dd>
<dt>文本</dt>
<dd>
<p>文本绘制:context.fillText(text, x, y [, maxWidth])</p>
<p>文本描边:context.strokeText(text, x, y [, maxWidth])</p>
<p>测量文本宽高等信息:context.measureText(text)</p>
<canvas id="text" width="800" height="100"></canvas>
<script>
{
const canvas = document.querySelector("#text");
const context = canvas.getContext("2d");
// 设置水平对齐方式,可选值：left、right、center、start、end
context.textAlign = "left";
//设置字体垂直对齐方式
context.textBaseline = "alphabetic";
const str = "Canvas学习";
//font默认值:10px sans-serif
context.fillText(str, 0, 10);
context.fillText(`宽${context.measureText(str).width}`, 0, 20);
// 设置字体和字号
context.font = "20px SimSun, SimHei";
context.fillText(str, 100, 20);
context.fillText(`宽${context.measureText(str).width}`, 100, 50);
//超过maxWidth限制后，文本水平方向压缩
context.fillText(str, 100, 80, 50);
// 文字描边
context.strokeText(str, 250, 20);
// 文字先描边
context.lineWidth = 3;
context.strokeStyle = "red";
context.strokeText(str, 250, 40);
// 再填充
context.fillText(str, 250, 40);
}
</script>
</dd>
<dt>其它</dt>
<dd>
<p>清除区域:context.clearRect(x, y, width, height);</p>
<p>裁剪区域:context.clip();</p>
<p>canvas.toDataURL(mimeType, quality);</p>
<p>canvas.toBlob(callback, mimeType, quality);</p>
<p>mimeType默认值image/png;quality表示转换的图片质量。范围是0到1。默认压缩值是0.92。</p>
<canvas id="clearRect" width="100" height="100"></canvas>
<canvas id="clip" width="100" height="100"></canvas>
<img src="" id="clip1" width="100" height="100" />
<img src="" id="clip2" width="100" height="100" />
<script>
{
const canvas = document.querySelector("#clearRect");
const context = canvas.getContext("2d");
const canvas1 = document.querySelector("#clip");
const context1 = canvas1.getContext("2d");
const image = new Image();
image.onload = function () {
context.drawImage(image, 0, 0, canvas.width, canvas.height);
context.clearRect(25, 25, 50, 50);
context1.arc(50, 50, 50, 0, 2 * Math.PI);
context1.clip();
context1.drawImage(image, 0, 0, canvas.width, canvas.height);
canvas1.toBlob(function (blob) {
const url = URL.createObjectURL(blob);
document.querySelector("#clip1").src = url;
});
const dataUrl = canvas1.toDataURL();
document.querySelector("#clip2").src = dataUrl;
};
image.src = "../images/1.jpg";
}
</script>
</dd>
</dl>
</dd>
</dl>
绘制属性
<dl>
<dt>属性</dt>
<dd>
<dl>
<dt>线</dt>
<dd>
<p>线宽:context.lineWidth = value</p>
<p>线条转角:context.lineJoin = 'miter'; context.lineJoin = 'round'; context.lineJoin = 'bevel';</p>
<p>线条端点:context.lineCap = 'butt'; context.lineCap = 'round'; context.lineCap = 'square';</p>
<p>虚线绘制的偏移距离:context.lineDashOffset = value</p>
<canvas id="lineWidth" width="800" height="100"></canvas>
<script>
{
const canvas = document.querySelector("#lineWidth");
const context = canvas.getContext("2d");
context.lineWidth = 2;
context.strokeRect(0, 0, 80, 80);
context.lineWidth = 10;
context.lineJoin = "miter";
context.strokeRect(100, 0, 80, 80);
context.lineJoin = "round";
context.strokeRect(200, 0, 80, 80);
context.lineJoin = "bevel";
context.strokeRect(300, 0, 80, 80);
context.lineJoin = "miter";
context.lineCap = "butt";
context.beginPath();
context.moveTo(400, 20);
context.lineTo(480, 20);
context.stroke();
context.lineCap = "round";
context.beginPath();
context.moveTo(400, 50);
context.lineTo(480, 50);
context.stroke();
context.lineCap = "square"; //线的端点多出一个方框，框框的宽度和线一样宽，高度是线厚度的一半
context.beginPath();
context.moveTo(400, 80);
context.lineTo(480, 80);
context.stroke();
context.lineCap = "butt";
//重置虚线设置 ctx.setLineDash(segments)
context.setLineDash([2, 2]);
context.lineDashOffset = 0;
context.beginPath();
context.moveTo(500, 20);
context.lineTo(580, 20);
context.stroke();
context.setLineDash([1, 2, 3, 6]);
context.lineDashOffset = 5;
context.beginPath();
context.moveTo(500, 50);
context.lineTo(580, 50);
context.stroke();
context.lineDashOffset = -5;
context.beginPath();
context.moveTo(500, 80);
context.lineTo(580, 80);
context.stroke();
}
</script>
</dd>
<dt>描边样式</dt>
<dd>
<p>context.strokeStyle = color</p>
<p>context.strokeStyle = gradient</p>
<p>context.strokeStyle = pattern</p>
<canvas id="stroke" width="800" height="100"></canvas>
<script>
{
const canvas = document.querySelector("#stroke");
const context = canvas.getContext("2d");
context.lineWidth = 10;
context.strokeStyle = "RGB(255, 0, 0)";
context.strokeRect(0, 0, 80, 80);
context.strokeStyle = "RGBA(255, 0, 0, .5)";
context.strokeRect(100, 0, 80, 80);
context.strokeStyle = "#FF0000";
context.strokeRect(200, 0, 80, 80);
// 创建线性渐变对象 context.createLinearGradient(x0, y0, x1, y1)
const gradientLinear = context.createLinearGradient(0, 0, 0, 100);
gradientLinear.addColorStop(0, "red");
gradientLinear.addColorStop(0.5, "yellow");
gradientLinear.addColorStop(1, "green");
context.strokeStyle = gradientLinear;
context.strokeRect(300, 0, 80, 80);
// 创建径向渐变对象 context.createRadialGradient(x0, y0, r0, x1, y1, r1);
const gradientRadial = context.createRadialGradient(440, 40, 0, 440, 40, 50);
gradientRadial.addColorStop(0, "red");
gradientRadial.addColorStop(1, "green");
context.strokeStyle = gradientRadial;
context.strokeRect(400, 0, 80, 80);
// 创建图案对象
const imagePattern = document.createElement("img");
imagePattern.onload = function () {
// 缩放原始图片到50*50大小
const canvas_img = document.createElement("canvas");
canvas_img.width = canvas_img.height = 50;
const context_img = canvas_img.getContext("2d");
// 通过drawImage()方法缩放
context_img.drawImage(this, 0, 0, 50, 50);
// 把这个创建的canvas图形作为图案使用 context.createPattern(image, repetition)
const pattern = context.createPattern(canvas_img, "repeat");
// 填充图案
context.strokeStyle = pattern;
context.strokeRect(500, 0, 80, 80);
};
imagePattern.src = "../images/1.jpg";
}
</script>
</dd>
<dt>填充样式</dt>
<dd>
<p>context.fillStyle = color</p>
<p>context.fillStyle = gradient</p>
<p>context.fillStyle = pattern</p>
<canvas id="fill" width="800" height="100"></canvas>
<script>
{
const canvas = document.querySelector("#fill");
const context = canvas.getContext("2d");
context.fillStyle = "RGB(255, 0, 0)";
context.fillRect(0, 0, 80, 80);
context.fillStyle = "RGBA(255, 0, 0, .5)";
context.fillRect(100, 0, 80, 80);
context.fillStyle = "#FF0000";
context.fillRect(200, 0, 80, 80);
// 创建线性渐变对象 context.createLinearGradient(x0, y0, x1, y1)
const gradientLinear = context.createLinearGradient(0, 0, 0, 100);
gradientLinear.addColorStop(0, "red");
gradientLinear.addColorStop(0.5, "yellow");
gradientLinear.addColorStop(1, "green");
context.fillStyle = gradientLinear;
context.fillRect(300, 0, 80, 80);
// 创建径向渐变对象 context.createRadialGradient(x0, y0, r0, x1, y1, r1);
const gradientRadial = context.createRadialGradient(440, 40, 0, 440, 40, 50);
gradientRadial.addColorStop(0, "red");
gradientRadial.addColorStop(1, "green");
context.fillStyle = gradientRadial;
context.fillRect(400, 0, 80, 80);
// 创建图案对象
const imagePattern = document.createElement("img");
imagePattern.onload = function () {
// 缩放原始图片到50*50大小
const canvas_img = document.createElement("canvas");
canvas_img.width = canvas_img.height = 50;
const context_img = canvas_img.getContext("2d");
// 通过drawImage()方法缩放
context_img.drawImage(this, 0, 0, 50, 50);
// 把这个创建的canvas图形作为图案使用
const pattern = context.createPattern(canvas_img, "repeat");
// 填充图案
context.fillStyle = pattern;
context.fillRect(500, 0, 80, 80);
};
imagePattern.src = "../images/1.jpg";
}
</script>
</dd>
</dl>
</dd>
</dl>
变换
<dl>
<dt>平移</dt>
<dd>
<p>context.translate(x, y)</p>
<p>顺时针方向旋转画布，单位是弧度。角度转弧度计算公式是：radian = degree * Math.PI / 180。</p>
<p>默认旋转中心点是Canvas的左上角(0, 0)坐标点</p>
<canvas id="translate" width="100" height="100"></canvas>
<script>
{
const canvas = document.querySelector("#translate");
const context = canvas.getContext("2d");
const width = canvas.width;
const height = canvas.height;
const img = new Image();
img.onload = function () {
context.translate(width / 2, height / 2); // 先位移坐标到中心
context.drawImage(this, 0, 0, width / 2, height / 2);
context.setTransform(1, 0, 0, 1, 0, 0); // 坐标系还原到初始
};
img.src = "../images/1.jpg";
}
</script>
</dd>
<dt>缩放</dt>
<dd>
<p>context.scale(x, y)</p>
<p>缩放Canvas画布的坐标系，只是影响坐标系，之后的绘制会受此方法影响，但之前已经绘制好的效果不会有任何变化。</p>
<p>默认缩放中心点是Canvas的左上角(0, 0)坐标点</p>
<canvas id="scale" width="800" height="100"></canvas>
<script>
{
const canvas = document.querySelector("#scale");
const context = canvas.getContext("2d");
// 对比
context.fillRect(10, 10, 10, 10);
// 缩放
context.scale(10, 3);
context.fillRect(10, 10, 10, 10);
context.setTransform(1, 0, 0, 1, 0, 0); // 恢复坐标系
// 对比
context.fillRect(30, 10, 10, 10);
context.save(); // 记住Canvas状态
// 垂直翻转
context.scale(1, -1);
context.font = "20px SimSun, SimHei";
context.fillText("Canvas学习", 300, -50);
context.restore(); // 恢复状态，不要影响接下来的绘制
context.fillText("Canvas学习", 300, 80);
}
</script>
</dd>
<dt>旋转</dt>
<dd>
<p>context.rotate(angle)</p>
<p>顺时针方向旋转画布，单位是弧度。角度转弧度计算公式是：radian = degree * Math.PI / 180。</p>
<p>默认旋转中心点是Canvas的左上角(0, 0)坐标点</p>
<canvas id="rotate" width="100" height="100"></canvas>
<script>
{
const canvas = document.querySelector("#rotate");
const context = canvas.getContext("2d");
const width = canvas.width;
const height = canvas.height;
const img = new Image();
img.onload = function () {
context.translate(width / 2, height / 2); // 先位移坐标到中心
context.rotate((180 * Math.PI) / 180); // 旋转
context.translate((-1 * width) / 2, (-1 * height) / 2); // 把定位中心移动到左上角
context.drawImage(this, 0, 0, width, height);
context.setTransform(1, 0, 0, 1, 0, 0); // 坐标系还原到初始
// 旋转45度
context.rotate((45 * Math.PI) / 180);
context.font = "20px SimSun, SimHei";
context.fillText("Canvas学习", 50, 40);
// 重置当前的变换矩阵为初始态
context.setTransform(1, 0, 0, 1, 0, 0);
};
img.src = "../images/1.jpg";
}
</script>
</dd>
<dt>变换</dt>
<dd>
<p>context.transform(a, b, c, d, e, f)</p>
<p>a 水平缩放 b 水平斜切</p>
<p>c 垂直斜切 d 垂直缩放</p>
<p>e 水平位移 f 垂直位移</p>
<canvas id="transform" width="100" height="100"></canvas>
<canvas id="transform1" width="100" height="100"></canvas>
<canvas id="transform2" width="100" height="100"></canvas>
<script>
{
const canvas = document.querySelector("#transform");
const context = canvas.getContext("2d");
const canvas1 = document.querySelector("#transform1");
const context1 = canvas1.getContext("2d");
const canvas2 = document.querySelector("#transform2");
const context2 = canvas2.getContext("2d");
const width = canvas.width;
const height = canvas.height;
const img = new Image();
img.onload = function () {
context.transform(0.5, 0, 0, 0.5, 0, 0);
context.drawImage(this, 0, 0, width, height);
context.setTransform(1, 0, 0, 1, 0, 0); // 坐标系还原到初始
context1.transform(1, 0, 0, 1, -20, -20);
context1.drawImage(this, 0, 0, width, height);
context1.setTransform(1, 0, 0, 1, 0, 0); // 坐标系还原到初始
context2.transform(1, 0.1, 0, 1, 0, 0);
context2.drawImage(this, 0, 0, width, height);
context2.setTransform(1, 0, 0, 1, 0, 0); // 坐标系还原到初始
};
img.src = "../images/1.jpg";
}
</script>
</dd>
</dl>
