Canvas

canvas.clearRect(0, 0, canvas.width, canvas.height);

var canvas = new Canvas();
this.widget.add(canvas);

// 设置线宽
canvas.lineWidth = 10;

// 墙体
canvas.strokeRect(75, 140, 150, 110);

// 门
canvas.fillRect(130, 190, 40, 60);

// 屋顶
canvas.beginPath();
canvas.moveTo(50, 140);
canvas.lineTo(150, 60);
canvas.lineTo(250, 140);
canvas.closePath();
canvas.stroke();

Extends

• Widget

Members

fillStyle :color|gradient

See:

• MDN web docs 了解详情.

Type:

• color | gradient

font :font

See:

• MDN web docs 了解详情.

Type:

• font

globalAlpha :Number

See:

• MDN web docs 了解详情.

Type:

• Number

globalCompositeOperation :String

See:

• MDN web docs 了解详情.

Type:

• String

height :Number

Overrides:

• Widget#height

Type:

• Number

lineCap :String

See:

• MDN web docs 了解详情.

Type:

• String

lineDashOffset :Number

See:

• MDN web docs 了解详情.

Type:

• Number

lineJoin :String

See:

• MDN web docs 了解详情.

Type:

• String

lineWidth :Number

See:

• MDN web docs 了解详情.

Type:

• Number

miterLimit :Number

See:

• MDN web docs 了解详情.

Type:

• Number

opacity :Number

Overrides:

• Widget#opacity

Type:

• Number

rotation :Number

Overrides:

• Widget#rotation

Type:

• Number

strokeStyle :color|gradient

See:

• MDN web docs 了解详情.

Type:

• color | gradient

textAlign :String

See:

• MDN web docs 了解详情.

Type:

• String

textBaseline :String

See:

• MDN web docs 了解详情.

Type:

• String

width :Number

Overrides:

• Widget#width

Type:

• Number

x :Number

Overrides:

• Widget#x

Type:

• Number

y :Number

Overrides:

• Widget#y

Type:

• Number

Methods

arc(x, y, radius, startAngle, endAngle, anticlockwiseopt)

See:

• MDN web docs 了解详情.

Example

// 此弧的中心坐标为 x=100, y=75，半径为 50。
// 要绘制一个完整的圆，弧从 0 弧度（0°）开始，到 2π 弧度（360°）结束。
var ctx = new Canvas();
this.widget.add(ctx);
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

Parameters:

arcTo(x1, y1, x2, y2, radius)

See:

• MDN web docs 了解详情.

Example

// 在此示例中，arcTo() 创建的路径是粗且黑色的。切线为灰色，控制点为红色，起始点为蓝色。
var ctx = new Canvas();
this.widget.add(ctx);
// 切线
ctx.beginPath();
ctx.strokeStyle = 'gray';
ctx.moveTo(200, 20);
ctx.lineTo(200, 130);
ctx.lineTo(50, 20);
ctx.stroke();

// 弧
ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.lineWidth = 5;
ctx.moveTo(200, 20);
ctx.arcTo(200, 130, 50, 20, 40);
ctx.stroke();

// 起点
ctx.beginPath();
ctx.fillStyle = 'blue';
ctx.arc(200, 20, 5, 0, 2 * Math.PI);
ctx.fill();

// 控制点
ctx.beginPath();
ctx.fillStyle = 'red';
ctx.arc(200, 130, 5, 0, 2 * Math.PI); // 控制点1
ctx.arc(50, 20, 5, 0, 2 * Math.PI);   // 控制点2
ctx.fill();

Parameters:

beginPath()

See:

• MDN web docs 了解详情.

Example

var ctx = new Canvas();
this.widget.add(ctx);
// 第一个路径
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.stroke();

// 第二个路径
ctx.beginPath();
ctx.strokeStyle = 'green';
ctx.moveTo(20, 20);
ctx.lineTo(120, 120);
ctx.stroke();

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

See:

• MDN web docs 了解详情.

Example

// 此示例展示如何绘制一条三次贝塞尔曲线。
var ctx = new Canvas();
this.widget.add(ctx);
// 定义各点 {x, y}
let start = { x: 50,    y: 20  };
let cp1 =   { x: 230,   y: 30  };
let cp2 =   { x: 150,   y: 80  };
let end =   { x: 250,   y: 100 };

// 绘制三次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(start.x, start.y);
ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);
ctx.stroke();

// 起点和终点
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(start.x, start.y, 5, 0, 2 * Math.PI);  // 起点
ctx.arc(end.x, end.y, 5, 0, 2 * Math.PI);      // 终点
ctx.fill();

// 控制点
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI);  // 控制点1
ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI);  // 控制点2
ctx.fill();

Parameters:

clearRect(x, y, width, height)

See:

• MDN web docs 了解详情.

Parameters:

clip()

See:

• MDN web docs 了解详情.

Example

var ctx = new Canvas();
this.widget.add(ctx);
// 创建圆形剪切区域
ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.clip();
// 绘制被剪切的内容
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, ctx.width, ctx.height);
ctx.fillStyle = 'orange';
ctx.fillRect(0, 0, 100, 100);

closePath()

See:

• MDN web docs 了解详情.

Example

var ctx = new Canvas();
this.widget.add(ctx);
// 绘制一个三角形
ctx.beginPath();
ctx.moveTo(20, 140);   // 移动画笔到左下角
ctx.lineTo(120, 10);   // 连接到顶部
ctx.lineTo(220, 140);  // 连接到右下角
ctx.closePath();       // 返回到起始点（左下角）
ctx.stroke();

createImageData(width, height) → {ImageData}

Since:

• EasyBuilder Pro V6.06.02

Example

const imageData = canvas.createImageData(100, 50);

Parameters:

Returns:

Type

ImageData

createLinearGradient(x0, y0, x1, y1) → {CanvasGradient}

See:

• MDN web docs 了解详情.

Example

var ctx = new Canvas();
this.widget.add(ctx);
// 创建一个线性渐变
// 起始渐变点坐标为 x=20, y=0
// 终止渐变点坐标为 x=220, y=0
var gradient = ctx.createLinearGradient(20, 0, 220, 0);

// 添加三个颜色停止点
gradient.addColorStop(0, 'green');
gradient.addColorStop(0.5, 'cyan');
gradient.addColorStop(1, 'green');

// 设置填充样式并绘制一个矩形
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 200, 100);

Parameters:

Returns:

Type

CanvasGradient

createRadialGradient(x0, y0, r0, x1, y1, r1) → {CanvasGradient}

See:

• MDN web docs 了解详情.

Example

// 此示例使用 createRadialGradient() 方法初始化一个放射状渐变。然后在渐变的两个圆之间创建三个颜色停止点。最后，将该渐变赋值给画布上下文，并渲染为填充的矩形。
var ctx = new Canvas();
this.widget.add(ctx);
// 创建一个放射状渐变
// 内圆位于 x=110, y=90, 半径为 30
// 外圆位于 x=100, y=100, 半径为 70
var gradient = ctx.createRadialGradient(110, 90, 30, 100, 100, 70);

// 添加三个颜色停止点
gradient.addColorStop(0, 'pink');
gradient.addColorStop(0.9, 'white');
gradient.addColorStop(1, 'green');

// 设置填充样式并绘制一个矩形
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 160, 160);

Parameters:

Returns:

Type

CanvasGradient

fill()

See:

• MDN web docs 了解详情.

Example

// 使用 fill() 方法填充一个矩形。
var ctx = new Canvas();
this.widget.add(ctx);
ctx.rect(10, 10, 150, 100);
ctx.stroke();

fillRect(x, y, width, height)

See:

• MDN web docs 了解详情.
• Canvas#strokeRect 查看空心矩形.

Example

var ctx = new Canvas();
this.widget.add(ctx);
ctx.fillStyle = 'green';
ctx.fillRect(20, 10, 150, 100);

Parameters:

fillText(text, x, y)

See:

• MDN web docs 了解详情.

Example

var ctx = new Canvas();
this.widget.add(ctx);
ctx.font = '50px serif';
ctx.fillText('Hello world', 50, 90);

Parameters:

getImageData(sx, sy, sw, sh) → {ImageData}

Since:

• EasyBuilder Pro V6.06.02

Example

canvas.rect(10, 10, 100, 100);
canvas.fill();

let imageData = canvas.getImageData(0, 0, 50, 50);
canvas.putImageData(imageData, 150, 10);

Parameters:

Returns:

Type

ImageData

getLineDash() → {Array.Number}

See:

• MDN web docs 了解详情.

Example

var ctx = new Canvas();
this.widget.add(ctx);
ctx.setLineDash([10, 20]);
console.log(ctx.getLineDash());  // [10, 20]

Returns:

Type

Array.Number

isPointInPath(x, y) → {Boolean}

See:

• MDN web docs 了解详情.

Example

// 检查某点是否在当前路径内。
var ctx = new Canvas();
this.widget.add(ctx);
ctx.rect(10, 10, 100, 100);
ctx.fill();
console.log(ctx.isPointInPath(30, 70));

Parameters:

Returns:

Type

Boolean

lineTo(x, y)

See:

• MDN web docs 了解详情.

Example

var ctx = new Canvas();
this.widget.add(ctx);
// 一条线从 (30, 50) 开始到 (150, 100) 结束。
ctx.beginPath();       // 开始一个新路径
ctx.moveTo(30, 50);    // 移动画笔到 (30, 50)
ctx.lineTo(150, 100);  // 绘制一条直线到 (150, 100)
ctx.stroke();          // 渲染路径

Parameters:

measureText(text) → {Object}

Example

let text = canvas.measureText('Hello world');
console.log(text.width);

Parameters:

Returns:

Type

Object

moveTo(x, y)

See:

• MDN web docs 了解详情.

Parameters:

putImageData(imageData, dx, dy)

Since:

• EasyBuilder Pro V6.06.02

Example

let canvas = new Canvas();
let mouseArea = new MouseArea();

this.widget.add(canvas);
this.widget.add(mouseArea);

// 创建渐变
var grd = canvas.createLinearGradient(0, 0, canvas.width - 20, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// 用渐变填充
canvas.fillStyle = grd;
canvas.fillRect(10, 10, canvas.width - 20, canvas.height - 20);

mouseArea.on('mousedown', (mouseEvent) => {
  const rvalue = getRandomInt(255);
  const gvalue = getRandomInt(255);
  const bvalue = getRandomInt(255);

  let imageData = canvas.createImageData(10, 10);
  for (let i = 0; i < imageData.data.length; i += 4) {
    imageData.data[i + 0] = rvalue;
    imageData.data[i + 1] = gvalue;
    imageData.data[i + 2] = bvalue;
    imageData.data[i + 3] = 255;
  }
  canvas.putImageData(imageData, mouseEvent.x - 5, mouseEvent.y - 5);
});

function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

Parameters:

quadraticCurveTo(cpx, cpy, x, y)

See:

• MDN web docs 了解详情.

Example

// 此示例展示如何绘制一条二次贝塞尔曲线。
var ctx = new Canvas();
this.widget.add(ctx);
// 绘制二次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(50, 20);
ctx.quadraticCurveTo(230, 30, 50, 100);
ctx.stroke();

// 起点和终点
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(50, 20, 5, 0, 2 * Math.PI);   // 起点
ctx.arc(50, 100, 5, 0, 2 * Math.PI);  // 终点
ctx.fill();

// 控制点
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(230, 30, 5, 0, 2 * Math.PI);
ctx.fill();

Parameters:

rect(x, y, width, height)

See:

• MDN web docs 了解详情.

Example

// 矩形的左上角位于 (10, 20)，宽 150，高 100。
var ctx = new Canvas();
this.widget.add(ctx);
ctx.rect(10, 20, 150, 100);
ctx.fill();

Parameters:

restore()

See:

• MDN web docs 了解详情.

rotate(angle)

See:

• MDN web docs 了解详情.

Parameters:

save()

See:

• MDN web docs 了解详情.

scale(x, y)

See:

• MDN web docs 了解详情.

Parameters:

setLineDash(segments)

See:

• MDN web docs 了解详情.

Example

// 此示例使用 setLineDash() 方法绘制一条虚线和一条实线。
var ctx = new Canvas();
this.widget.add(ctx);
// 虚线
ctx.beginPath();
ctx.setLineDash([5, 15]);
ctx.moveTo(0, 50);
ctx.lineTo(300, 50);
ctx.stroke();

// 实线
ctx.beginPath();
ctx.setLineDash([]);
ctx.moveTo(0, 100);
ctx.lineTo(300, 100);
ctx.stroke();

Parameters:

setTransform(a, b, c, d, e, f)

See:

• MDN web docs 了解详情. // 此示例对一个矩形同时进行垂直 (0.2) 和水平 (0.8) 倾斜。缩放和平移保持不变。 var ctx = new Canvas(); this.widget.add(ctx); ctx.transform(1, 0.2, 0.8, 1, 0, 0); ctx.fillRect(0, 0, 100, 100);

Parameters:

stroke()

See:

• MDN web docs 了解详情.

Example

// 使用 rect() 方法创建一个矩形，然后使用 stroke() 方法将其绘制到画布上。
var ctx = new Canvas();
this.widget.add(ctx);
ctx.rect(10, 10, 150, 100);
ctx.stroke();

strokeRect(x, y, width, height)

See:

• MDN web docs 了解详情.
• Canvas#fillRect 查看填充矩形.

Example

var ctx = new Canvas();
this.widget.add(ctx);
ctx.strokeStyle = 'green';
ctx.strokeRect(20, 10, 160, 100);

Parameters:

strokeText(text, x, y)

See:

• MDN web docs 了解详情.

Example

var ctx = new Canvas();
this.widget.add(ctx);
ctx.font = '50px serif';
ctx.strokeText('Hello world', 50, 90);

Parameters:

transform(a, b, c, d, e, f)

See:

• MDN web docs 了解详情.

Example

// 此示例对一个矩形同时进行垂直 (0.2) 和水平 (0.8) 倾斜。缩放和平移保持不变。
var ctx = new Canvas();
this.widget.add(ctx);
ctx.transform(1, 0.2, 0.8, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);

Parameters:

translate(x, y)

See:

• MDN web docs 了解详情.

Example

// translate() 方法将上下文水平移动 110 像素，垂直移动 30 像素。第一个正方形相对于默认位置移动了这些距离。
var ctx = new Canvas();
this.widget.add(ctx);
// 移动后的正方形
ctx.translate(110, 30);
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 80, 80);

// 重置当前变换矩阵为单位矩阵
ctx.setTransform(1, 0, 0, 1, 0, 0);

// 未移动的正方形
ctx.fillStyle = 'gray';
ctx.fillRect(0, 0, 80, 80);

Parameters: