代码拉取完成，页面将自动刷新
同步操作将从 OpenHarmony/docs 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
使用CanvasRenderingContext2D在canvas画布组件上进行绘制，绘制对象可以是矩形、文本、图片等。
示例
<!-- xxx.hml -->
<canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
<input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
// xxx.js
export default {
handleClick() {
const el = this.$refs.canvas1;
const ctx = el.getContext('2d');
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 6.28);
ctx.stroke();
},
}
填充一个矩形。
参数
返回值
无
示例
ctx.fillRect(20, 20, 200, 150);
指定绘制的填充色。
参数
返回值
无
示例
ctx.fillStyle = '#0000ff';
ctx.fillRect(20, 20, 150, 100);
删除指定区域内的绘制内容。
参数
返回值
无
示例
ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(0, 0, 400, 200);
ctx.clearRect(20, 20, 150, 100);
绘制具有边框的矩形，矩形内部不填充。
参数
返回值
无
示例
ctx.strokeRect(30, 30, 200, 150);
绘制填充类文本。
参数
返回值
无
示例
ctx.font = '35px sans-serif';
ctx.fillText("Hello World!", 20, 60);
绘制描边类文本。
参数
返回值
无
示例
ctx.font = '25px sans-serif';
ctx.strokeText("Hello World!", 20, 60);
该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。
参数
返回值
示例
ctx.font = '25px sans-serif';
var txt = 'Hello World';
ctx.fillText("width:" + ctx.measureText(txt).width, 20, 60);
ctx.fillText(txt, 20, 110);
指定绘制线条的宽度值。
参数
返回值
无
示例
ctx.lineWidth = 5;
ctx.strokeRect(25, 25, 85, 105);
设置描边的颜色。
参数
返回值
无
示例
ctx.lineWidth = 10;
ctx.strokeStyle = '#0000ff';
ctx.strokeRect(25, 25, 155, 105);
进行边框绘制操作。
参数
无
返回值
无
示例
ctx.moveTo(25, 25);
ctx.lineTo(25, 105);
ctx.strokeStyle = 'rgb(0,0,255)';
ctx.stroke();
创建一个新的绘制路径。
参数
无
返回值
无
示例
ctx.beginPath();
ctx.lineWidth = '6';
ctx.strokeStyle = '#0000ff';
ctx.moveTo(15, 80);
ctx.lineTo(280, 160);
ctx.stroke();
路径从当前点移动到指定点。
参数
返回值
无
示例
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(280, 160);
ctx.stroke();
从当前点到指定点进行路径连接。
参数
返回值
无
示例
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(280, 160);
ctx.stroke();
结束当前路径形成一个封闭路径。
参数
无
返回值
无
示例
ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(110, 30);
ctx.lineTo(70, 90);
ctx.closePath();
ctx.stroke();
指定线端点的样式。
参数
|
返回值
无
示例
ctx.lineWidth = 8;
ctx.beginPath();
ctx.lineCap = 'round';
ctx.moveTo(30, 50);
ctx.lineTo(220, 50);
ctx.stroke();
指定线段间相交的交点样式。
参数
|
返回值
无
示例
ctx.beginPath();
ctx.lineWidth = 8;
ctx.lineJoin = 'miter';
ctx.moveTo(30, 30);
ctx.lineTo(120, 60);
ctx.lineTo(30, 110);
ctx.stroke();
设置斜接面限制值，该值指定了线条相交处内角和外角的距离。
参数
返回值
无
示例
ctx.lineWidth = 8;
ctx.lineJoin = 'miter';
ctx.miterLimit = 3;
ctx.moveTo(30, 30);
ctx.lineTo(60, 35);
ctx.lineTo(30, 37);
ctx.stroke();
设置文本绘制中的字体样式。
参数
返回值
无
示例
ctx.font = '30px sans-serif';
ctx.fillText("Hello World", 20, 60);
设置文本绘制中的文本对齐方式。
参数
|
返回值
无
示例
ctx.strokeStyle = '#0000ff';
ctx.moveTo(140, 10);
ctx.lineTo(140, 160);
ctx.stroke();
ctx.font = '18px sans-serif';
// Show the different textAlign values
ctx.textAlign = 'start';
ctx.fillText('textAlign=start', 140, 60);
ctx.textAlign = 'end';
ctx.fillText('textAlign=end', 140, 80);
ctx.textAlign = 'left';
ctx.fillText('textAlign=left', 140, 100);
ctx.textAlign = 'center';
ctx.fillText('textAlign=center',140, 120);
ctx.textAlign = 'right';
ctx.fillText('textAlign=right',140, 140);
设置文本绘制中的水平对齐方式。
参数
返回值
无
示例
ctx.strokeStyle = '#0000ff';
ctx.moveTo(0, 120);
ctx.lineTo(400, 120);
ctx.stroke();
ctx.font = '20px sans-serif';
ctx.textBaseline = 'top';
ctx.fillText('Top', 10, 120);
ctx.textBaseline = 'bottom';
ctx.fillText('Bottom', 55, 120);
ctx.textBaseline = 'middle';
ctx.fillText('Middle', 125, 120);
ctx.textBaseline = 'alphabetic';
ctx.fillText('Alphabetic', 195, 120);
ctx.textBaseline = 'hanging';
ctx.fillText('Hanging', 295, 120);
通过指定图像和重复方式创建图片填充的模板。
参数
|
图源对象，具体参考Image对象。 |
||
返回值
示例
var pat = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pat;
ctx.fillRect(0, 0, 20, 20);
创建三次贝赛尔曲线的路径。
参数
返回值
无
示例
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.stroke();
创建二次贝赛尔曲线的路径。
参数
返回值
无
示例
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(100, 100, 200, 20);
ctx.stroke();
绘制弧线路径。
参数
返回值
无
示例
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 6.28);
ctx.stroke();
依据圆弧经过的点和圆弧半径创建圆弧路径。
参数
返回值
无
示例
ctx.moveTo(100, 20);
ctx.arcTo(150, 20, 150, 70, 50); // Create an arc
ctx.stroke();
创建矩形路径。
参数
返回值
无
示例
ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20)
ctx.stroke(); // Draw it
对封闭路径进行填充。
参数
无
返回值
无
示例
ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20)
ctx.fill(); // Draw it in default setting
设置当前路径为剪切路径。
参数
无
返回值
无
示例
ctx.rect(0, 0, 200, 200);
ctx.stroke();
ctx.clip();
// Draw red rectangle after clip
ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect(0, 0, 150, 150);
针对当前坐标轴进行顺时针旋转。
参数
返回值
无
示例
ctx.rotate(45 * Math.PI / 180); // Rotate the rectangle 45 degrees
ctx.fillRect(70, 20, 50, 50);
设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。
参数
返回值
无
示例
ctx.strokeRect(10, 10, 25, 25);
ctx.scale(2, 2);// Scale to 200%
ctx.strokeRect(10, 10, 25, 25);
transform()方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。
说明： 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）：
- x' = scaleX * x + skewY * y + translateX
- y' = skewX * x + scaleY * y + translateY
参数
返回值
无
示例
ctx.fillStyle = 'rgb(0,0,0)';
ctx.fillRect(0, 0, 100, 100)
ctx.transform(1, 0.5, -0.5, 1, 10, 10);
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(0, 0, 100, 100);
ctx.transform(1, 0.5, -0.5, 1, 10, 10);
ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(0, 0, 100, 100);
setTransfrom()方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。
参数
返回值
无
示例
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(0, 0, 100, 100)
ctx.setTransform(1,0.5, -0.5, 1, 10, 10);
ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(0, 0, 100, 100);
移动当前坐标系的原点。
参数
返回值
无
示例
ctx.fillRect(10, 10, 50, 50);
ctx.translate(70, 70);
ctx.fillRect(10, 10, 50, 50);
设置透明度。
参数
返回值
无
示例
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(0, 0, 50, 50);
ctx.globalAlpha = 0.4;
ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(50, 50, 50, 50);
进行图像绘制。
参数
|
图片资源，请参考Image对象。 |
||
返回值
无
示例
var test = this.$element('drawImage');
var ctx = test.getContext('2d');
var img = new Image();
img.src = 'common/image/test.jpg';
ctx.drawImage(img, 50, 80, 80, 80);
对保存的绘图上下文进行恢复。
参数
无
返回值
无
示例
ctx.restore();
对当前的绘图上下文进行保存。
参数
无
返回值
无
示例
ctx.save();
创建一个线性渐变色，返回CanvasGradient对象，请参考CanvasGradient对象。
参数
返回值
示例
<!-- xxx.hml -->
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
<input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
// xxx.js
export default {
handleClick() {
const el = this.$refs.canvas;
const ctx = el.getContext('2d');
// Linear gradient: start(50,0) end(300,100)
var gradient = ctx.createLinearGradient(50,0, 300,100);
// Add three color stops
gradient.addColorStop(0.0, 'red');
gradient.addColorStop(0.5, 'white');
gradient.addColorStop(1.0, 'green');
// Set the fill style and draw a rectangle
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 500, 500);
}
}
创建新的ImageData 对象，请参考ImageData对象。
参数
返回值
示例
imageData = ctx.createImageData(50, 100); // Create ImageData with 50px width and 100px height
newImageData = ctx.createImageData(imageData); // Create ImageData using the input imageData
以当前canvas指定区域内的像素创建ImageData对象。
参数
返回值
示例
var test = this.$element('getImageData');
var ctx = test.getContext('2d');
var imageData = ctx.getImageData(0, 0, 280, 300);
使用ImageData数据填充新的矩形区域。
参数
返回值
无
示例
var test = this.$element('putImageData');
var ctx = test.getContext('2d');
var imgData = ctx.createImageData(100, 100);
for (var i = 0; i < imgData.data.length; i += 4) {
imgData.data[i + 0] = 255;
imgData.data[i + 1] = 0;
imgData.data[i + 2] = 0;
imgData.data[i + 3] = 255;
}
ctx.putImageData(imgData, 10, 10);
设置画布的虚线样式。
获得当前画布的虚线样式。
设置画布的虚线偏移量。
设置合成操作的方式。
参数
|
合成操作的类型字段。可选值有source-over(默认值)，source-atop，source-in，source-out，destination-over，destination-atop，destination-in，destination-out，lighter，copy，xor。 |
属性值：
返回值
无
示例
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(20, 20, 50, 50);
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(50, 50, 50, 50);
// Start drawing second example
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(120, 20, 50, 50);
ctx.globalCompositeOperation = 'destination-over';
ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(150, 50, 50, 50);
示例中，新绘制内容是蓝色矩形，现有绘制内容是红色矩形。
设置绘制阴影时的模糊级别，默认值为0。
参数
返回值
无
示例
ctx.shadowBlur = 30;
ctx.shadowColor = 'rgb(0,0,0)';
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(20, 20, 100, 80);
设置绘制阴影时的阴影颜色。
参数
返回值
无
示例
ctx.shadowBlur = 30;
ctx.shadowColor = 'rgb(0,0,255)';
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(30, 30, 100, 100);
设置绘制阴影时和原有对象的水平偏移值。
参数
返回值
无
示例
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 20;
ctx.shadowColor = 'rgb(0,0,0)';
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(20, 20, 100, 80);
设置绘制阴影时和原有对象的垂直偏移值。
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
