总得运用脚本来绘制图形,必须选用脚本来绘制图形

超多种经营典 canvas 实例

普及:<canvas> 成分用于在网页上绘制图形。那是3个图片容器,您可以操纵其每一像素,必须利用脚本来绘制图形。

只顾:IE 8 以及更早的版本不帮衬 <canvas> 元素。

贴士:全体例证都享受在自作者的 GayHub
– https://github.com/bxm0927/canvas-special

超多经典 canvas 实例

普及<canvas>
成分用于在网页上绘制图形。那是三个图纸容器,您能够决定其每一像素,必须选用脚本来绘制图形。

注意:IE 8 以及更早的本子不辅助 <canvas> 元素。

贴士:全体育赛事例都享受在本身的 GayHub –
https://github.com/bxm0927/canvas-special

尤雨溪个人主页炫彩三角纽带作用,点击还可转换

GitHub源码 、 Demo演示

图片 1

尤雨溪个人主页炫彩三角纽带成效,点击还可变换

GitHub源码

Demo演示

图片 2

今日头条登录注册页动态离子背景效果

GitHub源码 、 Demo演示

图片 3

搜狐登录注册页动态离子背景效果

GitHub源码

Demo演示

图片 4

依照 canvas 的五子棋完整意义完成

GitHub源码 、 Demo演示

图片 5

依据 canvas 的五子棋完整意义达成

GitHub源码

Demo演示

图片 6

遗闻 canvas 的《是相公就下100层》小游戏完美兑现

GitHub源码 、 Demo演示

依照 canvas 的《是男人就下100层》小游戏完美兑现

GitHub源码

Demo演示

毛笔字书写田字格,可以写字

GitHub源码 、 Demo演示

图片 7

毛笔字书写田字格,能够写字

GitHub源码

Demo演示

图片 8

随心而动,随刃而行。输入文字呈现动画粒子特效

GitHub源码 、 Demo演示

图片 9

随心而动,随刃而行。输入文字显示动画粒子特效

GitHub源码

Demo演示

图片 10

鼠标移动炫彩小球

GitHub源码 、 Demo演示

图片 11

鼠标移动炫彩小球

GitHub源码

Demo演示

图片 12

2048

GitHub源码 、 Demo演示

图片 13

2048

GitHub源码

Demo演示

图片 14

贪吃蛇

GitHub源码 、 Demo演示

图片 15

贪吃蛇

GitHub源码

Demo演示

图片 16

看你有多色

GitHub源码 、 Demo演示

图片 17

看你有多色

GitHub源码

Demo演示

图片 18

坦克大战

GitHub源码 、 Demo演示

图片 19

坦克大战

GitHub源码

Demo演示

图片 20

自然界行星旋转特效

GitHub源码 、 Demo演示

图片 21

大自然行星旋转特效

GitHub源码

Demo演示

图片 22

开发宝咻咻咻动画特效

GitHub源码 、 Demo演示

图片 23

支出宝咻咻咻动画特效

GitHub源码

Demo演示

图片 24

程序员表白代码

GitHub源码 、 Demo演示

图片 25

程序员求亲代码

GitHub源码

Demo演示

图片 26

心形文字

GitHub源码 、 Demo演示

图片 27

心形文字

GitHub源码

Demo演示

图片 28

照片墙

GitHub源码 、 Demo演示

图片 29

照片墙

GitHub源码

Demo演示

图片 30

License

The code is available under the MIT
license
.

<marquee>不断更新,欢迎补充!</marquee>

 

 

!

图片 31


License

The code is available under the MIT
license
.

<marquee>不断更新,欢迎补充!</marquee>

!

图片 32


canvas 简介

<canvas> 成分用于在网页上制图图形。那是三个图纸容器,您能够操纵其每一像素,必须使用脚本来绘制图形。

<canvas> 标记和 SVG 以及 VML 之间的多少个重庆大学的分裂是,<canvas>
有1个根据 JavaScript 的绘图 API,而 SVG 和 VML 使用3个 XML
文档来讲述绘图。

留神:IE 8 以及更早的本子不扶助 <canvas> 元素。

 

 

!

图片 33

canvas 简介

<canvas>
成分用于在网页上制图图形。那是三个图形容器,您能够决定其每一像素,必须利用脚本来绘制图形。

<canvas> 标记和 SVG 以及 VML 之间的一个根本的两样是,<canvas>
有贰个遵照 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML
文档来叙述绘图。

留神:IE 8 以及更早的本子不襄助 <canvas> 元素。

!

图片 34

canvas 初体验

<canvas id="myCanvas" width="450" height="450">
  Your browser does not support the Canvas API, Please upgrade your browser.
</canvas>

<script>
let myCanvas = document.getElementById('myCanvas');
let ctx = myCanvas.getContext('2d');

ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.lineTo(200, 300);

ctx.stroke();
</script>

canvas 初体验

<canvas id="myCanvas" width="450" height="450">
  Your browser does not support the Canvas API, Please upgrade your browser.
</canvas>

<script>
let myCanvas = document.getElementById('myCanvas');
let ctx = myCanvas.getContext('2d');

ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.lineTo(200, 300);

ctx.stroke();
</script>

canvas 核心 API 讲解

提出我们看官方文书档案来系统的学习 canvas
API,本文上边包车型大巴例子只是对知识点的巩固。

canvas 核心 API 讲解

建议大家看官方文书档案来系统的读书 canvas
API,本文上边包车型客车例子只是对知识点的巩固。

水彩、样式和影子

水彩、样式和影子

fillStylestrokeStyle

fillStyle 属性设置或重临用于填充绘画的颜色、渐变或形式。

strokeStyle 属性设置或回到用于笔触的颜料、渐变或形式。

// 用蓝色填充矩形
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);

// 渐变填充
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

// 图像填充
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();

 

 

!

图片 35

 

 

!

图片 36

fillStylestrokeStyle

fillStyle 属性设置或重临用于填充绘画的水彩、渐变或格局。

strokeStyle 属性设置或回到用于笔触的颜料、渐变或方式。

// 用蓝色填充矩形
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);

// 渐变填充
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

// 图像填充
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();

!

图片 37

!

图片 38

shadowBlurshadowColor

shadowBlur 设置或重返用于阴影的混淆级别

shadowColor 设置或回到用于阴影的颜料

表明1:请将 shadowColor 属性与 shadowBlur 属性一起使用,来成立阴影。

申明2:请通过应用 shadowOffsetX 和 shadowOffsetY 属性来调节阴影效果。

ctx.shadowBlur=20;
ctx.shadowColor="black";
ctx.fillStyle="blue";
ctx.fillRect(20,20,100,80);

 

 

!

图片 39

shadowBlurshadowColor

shadowBlur 设置或再次回到用于阴影的模糊级别

shadowColor 设置或回到用于阴影的颜料

诠释1:请将 shadowColor 属性与 shadowBlur 属性一起利用,来创立阴影。

诠释2:请通过动用 shadowOffsetX 和 shadowOffsetY 属性来调节阴影效果。

ctx.shadowBlur=20;
ctx.shadowColor="black";
ctx.fillStyle="blue";
ctx.fillRect(20,20,100,80);

!

图片 40

createLinearGradient()createRadialGradient()

context.createLinearGradient(x0,y0,x1,y1) 创设线性渐变

context.createRadialGradient(x0,y0,r0,x1,y1,r1) 创制放射状/环形的渐变

注释:addColorStop(stop,color) 方法与 createLinearGradient() 或 createRadialGradient()一路行使。

var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

 

 

!

图片 41

var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);

 

 

!

图片 42

createLinearGradient()createRadialGradient()

context.createLinearGradient(x0,y0,x1,y1) 创造线性渐变

context.createRadialGradient(x0,y0,r0,x1,y1,r1) 创设放射状/环形的渐变

注释:addColorStop(stop,color) 方法与 createLinearGradient()
createRadialGradient() 一起利用。

var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

!

图片 43

var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);

!

图片 44

context.createPattern()

context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat") 重复绘制成分,成分得以是图片、录像,或许其他<canvas> 成分。

var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();

 

 

!

图片 45

context.createPattern()

context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat")
重复绘制元素,元素得以是图形、录像,或然别的 <canvas> 成分。

var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();

!

图片 46

线条样式

线条样式

lineCap

context.lineCap="butt|round|square"

设置或回到线条的扫尾端点样式 (平直的边缘(私下认可)、圆形线帽、正方形线帽)

lineCap

context.lineCap="butt|round|square"

设置或回到线条的甘休端点样式 (平直的边缘(暗中同意)、圆形线帽、圆锥形线帽)

lineJoin

context.lineJoin="miter|bevel|round"

设置或重临两条线相交时,所创办的转角类型 (尖角(暗许)、斜角、圆角)

ctx.beginPath();
ctx.lineJoin="round";
ctx.moveTo(20,20);
ctx.lineTo(100,50);
ctx.lineTo(20,100);
ctx.stroke();

 

 

!

图片 47

lineJoin

context.lineJoin="miter|bevel|round"

安装或再次来到两条线相交时,所创设的转角类型 (尖角(暗许)、斜角、圆角)

ctx.beginPath();
ctx.lineJoin="round";
ctx.moveTo(20,20);
ctx.lineTo(100,50);
ctx.lineTo(20,100);
ctx.stroke();

!

图片 48

lineWidth

ctx.lineWidth = 10

安装或重回当前的线条宽度,单位 px

lineWidth

ctx.lineWidth = 10

安装或再次来到当前的线条宽度,单位 px

矩形

矩形

rect()fillRect()strokeRect()

context.rect(x,y,width,height) 创造矩形

context.fillRect(x,y,width,height) 创设已填色的矩形,暗中认可的填写颜色是灰褐。

context.strokeRect(x,y,width,height) 创设不填色的矩形,私下认可的思绪颜色是浅品绿。

// 红色矩形
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(5,5,290,140);
ctx.stroke();

rect()fillRect()strokeRect()

context.rect(x,y,width,height) 创立矩形

context.fillRect(x,y,width,height)
创制已填色的矩形,暗许的填充颜色是石青。

context.strokeRect(x,y,width,height)
创造不填色的矩形,暗中认可的笔触颜色是玉海洋蓝。

// 红色矩形
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(5,5,290,140);
ctx.stroke();

clearRect()

clearRect() 在给定的矩形内清除钦点的像素

// 在给定矩形内清空一个矩形
ctx.fillStyle="red";
ctx.fillRect(0,0,300,150);
ctx.clearRect(20,20,100,50);

 

 

!

图片 49

clearRect()

clearRect() 在加以的矩形内清除钦定的像素

// 在给定矩形内清空一个矩形
ctx.fillStyle="red";
ctx.fillRect(0,0,300,150);
ctx.clearRect(20,20,100,50);

!

图片 50

路径

唤醒:请使用这几个艺术来创制路径:moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo()
以及 arc()。

路径

晋升:请使用那几个主意来创设路径:moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo()
以及 arc()。

fill()

填充当前的图像(路径)。暗中同意颜色是浅花青。

提示:请使用 fillStyle 属性来填充另一种颜色/渐变。

注解:假诺路径未关门,那么 fill()
方法会从路径甘休点到起来点之间添加一条线,以关闭该路线,然后填充该路线。

// 绘制 150*100 像素的矩形,然后用绿色来给它填色:
ctx.rect(20,20,150,100);
ctx.fillStyle="green";
ctx.fill();

 

 

!

图片 51

fill()

填充当前的图像(路径)。暗许颜色是巴黎绿。

提示:请使用 fillStyle 属性来填充另一种颜色/渐变。

诠释:假诺路径未关门,那么 fill()
方法会从路径截止点到起来点时期添加一条线,以关闭该路线,然后填充该路线。

// 绘制 150*100 像素的矩形,然后用绿色来给它填色:
ctx.rect(20,20,150,100);
ctx.fillStyle="green";
ctx.fill();

!

图片 52

stroke()

stroke() 方法会绘制出通过 moveTo() 和 lineTo()
方法定义的路线。暗中同意颜色是铁蓝。

提示:请使用 strokeStyle 属性来绘制另一种颜色/渐变。

stroke()

stroke() 方法会绘制出通过 moveTo() 和 lineTo()
方法定义的路线。私下认可颜色是稻草黄。

提示:请使用 strokeStyle 属性来绘制另一种颜色/渐变。

beginPath()

begin帕特h() 起首一条路子,或重置当前路线

beginPath()

beginPath() 初阶一条路线,或重置当前路线

closePath()

closePath() 创造从近来点回到开端点的门径

closePath()

closePath() 创设从当下点回来初阶点的门径

moveTo()lineTo()

moveTo() 把路子移动到画布中的指确定地点,不创制线条

lineTo() 添加三个新点,然后在画布中创立从该点到最终指确定地点的线条

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

moveTo()lineTo()

moveTo() 把路子移动到画布中的钦赐点,不创制线条

lineTo() 添加一个新点,然后在画布中开创从该点到最后钦赐点的线条

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

quadraticCurveTo()bezierCurveTo()

context.quadraticCurveTo(cpx,cpy,x,y); 创立三遍贝塞尔曲线

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); 创设三回方贝塞尔曲线

ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();

图片 53

image

ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();

图片 54

image

quadraticCurveTo()bezierCurveTo()

context.quadraticCurveTo(cpx,cpy,x,y); 创制二遍贝塞尔曲线

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); 创立壹次方贝塞尔曲线

ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();

图片 55

image

ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();

图片 56

image

arc()arcTo()

context.arc(x,y,r,sAngle,eAngle[,counterclockwise]); 成立弧/曲线(用于创设圆形或一些圆)

context.arcTo(x1,y1,x2,y2,r); 创制两切线之间的弧/曲线

ctx.beginPath();
arc(100, 75, 50, 0*Math.PI, 1.5*Math.PI)
ctx.stroke();

图片 57

image

ctx.beginPath();
ctx.moveTo(20,20);           // 创建开始点
ctx.lineTo(100,20);          // 创建水平线
ctx.arcTo(150,20,150,70,50); // 创建弧
ctx.lineTo(150,120);         // 创建垂直线
ctx.stroke();                // 进行绘制

 

 

!

图片 58

arc()arcTo()

context.arc(x,y,r,sAngle,eAngle[,counterclockwise]);
创制弧/曲线(用于创立圆形或局地圆)

context.arcTo(x1,y1,x2,y2,r); 创建两切线之间的弧/曲线

ctx.beginPath();
arc(100, 75, 50, 0*Math.PI, 1.5*Math.PI)
ctx.stroke();

图片 59

image

ctx.beginPath();
ctx.moveTo(20,20);           // 创建开始点
ctx.lineTo(100,20);          // 创建水平线
ctx.arcTo(150,20,150,70,50); // 创建弧
ctx.lineTo(150,120);         // 创建垂直线
ctx.stroke();                // 进行绘制

!

图片 60

clip()

clip() 从原始画布剪切任意形状和尺寸的区域

// 剪切矩形区域
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// 在 clip() 之后绘制绿色矩形
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);

 

 

!

图片 61

clip()

clip() 从原始画布剪切任意形状和尺寸的区域

// 剪切矩形区域
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// 在 clip() 之后绘制绿色矩形
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);

!

图片 62

isPointInPath()

isPointInPath() 倘诺钦点的点位于当下路线中,则赶回 true,不然再次回到 false

ctx.rect(20,20,150,100);
if (ctx.isPointInPath(20,50)) {
  ctx.stroke()
}

isPointInPath()

isPointIn帕特h() 如若钦定的点位于当下路线中,则赶回 true,不然重返 false

ctx.rect(20,20,150,100);
if (ctx.isPointInPath(20,50)) {
  ctx.stroke()
}

转换

转换

scale()

scale() 缩放当前绘制至更大或更小

// 绘制矩形,放大到 200%,然后再次绘制矩形:
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);

 

 

!

图片 63

scale()

scale() 缩放当前绘制至更大或更小

// 绘制矩形,放大到 200%,然后再次绘制矩形:
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);

!

图片 64

rotate()

rotate() 旋转当前绘制

// 将矩形旋转 20 度:
ctx.rotate(20 * Math.PI / 180);
ctx.fillRect(50,20,100,50);

 

 

!

图片 65

rotate()

rotate() 旋转当前绘制

// 将矩形旋转 20 度:
ctx.rotate(20 * Math.PI / 180);
ctx.fillRect(50,20,100,50);

!

图片 66

translate()

translate() 重新定义画布上的 (0,0) 地点

ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);

 

 

!

图片 67

translate()

translate() 重新定义画布上的 (0,0) 地点

ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);

!

图片 68

transform()setTransform()

context.transform(a,b,c,d,e,f); 替换绘图的眼下转换矩阵

context.setTransform(a,b,c,d,e,f); 将眼下转换重置为单位矩阵。然后运营transform()

transform()setTransform()

context.transform(a,b,c,d,e,f); 替换绘图的最近更换矩阵

context.setTransform(a,b,c,d,e,f); 将近来更换重置为单位矩阵。然后运转transform()

文本

文本

fonttextAligntextBaseline

font 设置或回到文本内容的此时此刻字体属性

textAlign 设置或重临文本内容的当前对齐方式

textBaseline 设置或回到在绘制文本时选择的此时此刻文件基线

fonttextAligntextBaseline

font 设置或重临文本内容的当下字体属性

textAlign 设置或回到文本内容的最近对齐方式

textBaseline 设置或再次来到在绘制文本时选择的当下文件基线

fillText()strokeText()measureText()

context.fillText(text, x, y, maxWidth); 在画布上制图被填充的文本

context.strokeText(text,x,y,maxWidth); 在画布上制图像和文字本(无填充)

context.measureText(text).width; 重临包括钦赐文本宽度的靶子

ctx.font="30px Arial";
ctx.fillText("Hello World", 10, 50);

ctx.font="40px Arial";
// 创建渐变
var gradient=ctx.createLinearGradient(0, 0, myCanvas.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// 用渐变填色
ctx.strokeStyle=gradient;
ctx.strokeText("Hello World", 10, 90);

fillText()strokeText()measureText()

context.fillText(text, x, y, maxWidth); 在画布上绘制被填充的文书

context.strokeText(text,x,y,maxWidth); 在画布上绘制文本(无填充)

context.measureText(text).width; 重临包蕴钦点文本宽度的靶子

ctx.font="30px Arial";
ctx.fillText("Hello World", 10, 50);

ctx.font="40px Arial";
// 创建渐变
var gradient=ctx.createLinearGradient(0, 0, myCanvas.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// 用渐变填色
ctx.strokeStyle=gradient;
ctx.strokeText("Hello World", 10, 90);

图像绘制

图像绘制

drawImage()

context.drawImage(img,x,y,width,height); 向画布上制图图像、画布或录制

var img=document.getElementById("tulip");
ctx.drawImage(img, 10, 10);

drawImage()

context.drawImage(img,x,y,width,height); 向画布上制图图像、画布或录制

var img=document.getElementById("tulip");
ctx.drawImage(img, 10, 10);

像素操作

像素操作

widthheightdata

width 再次回到 ImageData 对象的增长幅度

height 重临 ImageData 对象的莫斯中国科学技术大学学

data 重临多少个指标,其蕴藉钦命的 ImageData 对象的图像数据

widthheightdata

width 重临 ImageData 对象的幅度

height 再次回到 ImageData 对象的惊人

data 再次来到一个对象,其涵盖钦点的 ImageData 对象的图像数据

createImageData()getImageData()putImageData()

createImageData() 创制新的、空白的 ImageData 对象

getImageData() 重临 ImageData 对象,该对象为画布上点名的矩形复制像素数据

putImageData() 把图像数据(从钦命的 ImageData 对象)放回画布上

createImageData()getImageData()putImageData()

createImageData() 成立新的、空白的 ImageData 对象

getImageData() 重回 ImageData 对象,该指标为画布上点名的矩形复制像素数据

putImageData() 把图像数据(从钦点的 ImageData 对象)放回画布上

合成

context.globalAlpha = number; 设置或重返绘图的方今 阿尔法 或透明值
context.globalCompositeOperation="source-in"; 设置或重回新图像怎样绘制到已有些图像上

合成

context.globalAlpha = number; 设置或重临绘图的脚下 阿尔法 或透明值
context.globalCompositeOperation="source-in";
设置或回到新图像怎样绘制到已有的图像上

其他

其他

save()restore()

save() 保存当前条件的情状
restore() 重回在此以前封存过的途径状态和本性

save()restore()

save() 保存当前条件的景况
restore() 再次来到在此以前封存过的路子状态和属性

getContext

let cxt = Canvas.getContext('2d')

为分化的绘图类型 (2d、3d) 提供不一样的条件,当前唯一帮衬的是 2d 环境

getContext

let cxt = Canvas.getContext('2d')

为分歧的绘图类型 (2d、3d) 提供不一致的条件,当前唯一协助的是 2d 环境