圆形渐变,对象提供了一组用来在画布上绘制的

作者: 网络资讯  发布:2019-08-03

HTML DOM CanvasRenderingContext2D 对象参考手册

 

Canvas绘图

描述

HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript)。

不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务。

getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。

本手册提供完整的 getContext("2d") 对象属性和方法,可用于在画布上绘制文本、线条、矩形、圆形等等。

canvas主要属性和方法

CanvasRenderingContext2D 对象

CanvasRenderingContext2D 对象提供了一组用来在画布上绘制的图形函数。可用的函数非常丰富,它们可以分为以下几类:

  • HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
  • 画布是一个矩形区域,您可以控制其每一像素。
  • canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
  • 浏览器支持
    • Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持<canvas> 及其属性和方法。
    • 注释:Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
  • HTML 5 Canvas 参考手册

颜色、样式和阴影

属性 描述

fillStyle

设置或返回用于填充绘画的颜色、渐变或模式

strokeStyle

设置或返回用于笔触的颜色、渐变或模式

shadowColor

设置或返回用于阴影的颜色

shadowBlur

设置或返回用于阴影的模糊级别

shadowOffsetX

设置或返回阴影距形状的水平距离

shadowOffsetY

设置或返回阴影距形状的垂直距离

方法 描述

createLinearGradient()

创建线性渐变(用在画布内容上)

createPattern()

在指定的方向上重复指定的元素

createRadialGradient()

创建放射状/环形的渐变(用在画布内容上)

addColorStop()

规定渐变对象中的颜色和停止位置

方法                                   描述
save()                           保存当前环境的状态
restore()                           返回之前保存过的路径状态和属性
createEvent()         
getContext()                   返回一个对象,指出访问绘图功能必要的API
toDataURL()                   返回canvas图像的URL

绘制矩形

可以使用 strokeRect() 和 fillRect() 来绘制矩形的边框和填充矩形。此外,可以使用 clearRect() 来清除矩形所定义的区域。

1、基本用法

线条样式

属性 描述

lineCap

设置或返回线条的结束端点样式

lineJoin

设置或返回两条线相交时,所创建的拐角类型

lineWidth

设置或返回当前的线条宽度

miterLimit

设置或返回最大斜接长度

canvas的API颜色、样式和阴影属性和方法

绘制图像

在 Canvas API 中,图像通过表示 HTML <img> 元素的 Image 对象来指定,或者通过使用 Image() 构造函数所创建的屏幕外图像来指定。一个 Canvas 对象也可以用作图像来源。

可以使用 drawImage() 方法在一个画布上绘制图像;而更为常见的形式是,允许源图像的任意矩形区域缩放或绘制到画布上。

(1)创建 Canvas 元素

矩形

方法 描述

rect()

创建矩形

fillRect()

绘制“被填充”的矩形

strokeRect()

绘制矩形(无填充)

clearRect()

在给定的矩形内清除指定的像素

属性                               描述
fillStyle                           设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle                   设置或返回用于笔触的颜色、渐变或模式
shadowColor                   设置或返回用于阴影的颜色
shadowBlur                   设置或返回用于阴影的模糊级别
shadowOffsetX           设置或返回阴影距形状的水平距离
shadowOffsetY           设置或返回阴影距形状的垂直距离

创建和渲染路径

画布的一项强大功能是,它能够从基本的绘图操作来构建图形,然后,绘制这些图形的框架(勾勒它们)或者给这些图形的内容涂色(填充它们)。累计起来的操作统一叫做当前路径。一个画布只保持一条当前路径。

为了构建一个多条线段所构成的一个连续的封闭形状,绘制操作之间需要一个连接点。为此,画布保存了一个当前位置。画布绘制操作显式地使用这个位置作为它们的起始点,并且更新它直到到达终点。可以把这看做是使用钢笔或纸来绘画:当您完成了一条具体的线段或曲线,当前位置就是完成这一操作之后钢笔所停留的点。

可以在当前路径中创建一系列互相不连续的形状,它们都使用同样的绘制参数一起渲染。要分隔开这些形状,请使用 moveTo() 方法,这个方法把当前的位置移动到一个新的位置而不添加一条连接线段。当您这么做的时候,就创建了一条新的路径,这是用来表示一组连接起来的操作的画布术语。

一旦您所想要的路径形成了,可以使用 stroke() 绘制其边框,使用 fill() 来绘制其内容;或者两件事都做。

可用的图形操作有:用来绘制直线的 lineTo(),用于绘制矩形的 rect(),用于绘制部分圆形的 arc() 或 arcTo(),以及用于绘制曲线的 bezierCurveTo() 或 quadraticCurveTo()。

除了勾勒和填充,还可以使用当前路径来指定绘制时画布所使用的剪切区域。这个区域中的像素是显示的,区域之外的像素是不显示的。剪切区域是累加性的;调用 clip() 可以将当前路径和当前绘制区域取交集,产生一个新的区域。不幸的是,没有直接的方法把当前的剪切区域设置为画布的范围;要做到这一点,必须保存和恢复画布的整个图形状态。

如果任何子路径中的线段没有形成一个闭合的图形,fill() 和 clip() 操作通过添加一条从子路径的起点到终点的、虚拟(勾勒的时候看不到)线段来闭合它。可选的是,也可以调用 closePath() 来显示地添加这条线段。

  • 向 HTML5 页面添加 canvas 元素。
  • 规定元素的 id、宽度和高度。
  • 开始和结束标签中的内容是后备信息,如果浏览器不支持<canvas>元素,就会显示这些信息。

路径

方法 描述

fill()

填充当前绘图(路径)

stroke()

绘制已定义的路径

beginPath()

起始一条路径,或重置当前路径

moveTo()

把路径移动到画布中的指定点,不创建线条

closePath()

创建从当前点回到起始点的路径

lineTo()

添加一个新点,然后在画布中创建从该点到最后指定点的线条

clip()

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

quadraticCurveTo()

创建二次贝塞尔曲线

bezierCurveTo()

创建三次方贝塞尔曲线

arc()

创建弧/曲线(用于创建圆形或部分圆)

arcTo()

创建两切线之间的弧/曲线

isPointInPath()

如果指定的点位于当前路径中,则返回 true,否则返回 false

方法                                           描述
createLinearGradient()           创建线性渐变(用在画布内容上)
createPattern()                   在指定的方向上重复指定的元素
createRadialGradient()           创建放射状/环形的渐变(用在画布内容上)
addColorStop()                   规定渐变对象中的颜色和停止位置

颜色、渐变和模式

在填充和勾勒路径时,可用 fillStyle 和 strokeStyle 属性来指定线段或者绘制区域如何绘制。CSS 样式颜色字符串,以及描述渐变和模式的 CanvasGradient 或 CanvasPattern 都是可以接受的。要创建一个渐变,请使用 createLinearGradient() 或 createRadialGradient()。要创建一个模式,请使用 createPattern()。

要用 CSS 表示法来指定不透明的颜色,就采用 "#RRGGBB" 形式的字符串,其中 RR、GG 和 BB 分别是指定颜色的红色、绿色和蓝色成分的十六进制,其值都在 00 和 FF 之间。例如,完全红色的值是 "#FF0000"。要指定部分透明的颜色,请使用一个 "rgba(R,G,B,A)" 形式的字符串。在这种形式中,R、G 和 B 将颜色的红色、绿色和蓝色成分指定为 0 到 255 之间的十进制整数,并且 A 把 alpha(不透明)成分指定为 0.0 (完全透明)和 1.0 (完全不透明)之间的一个浮点数值。例如,半透明的完全红色为 "rgba(255,0,0,0.5)"。

转换

方法 描述

scale()

缩放当前绘图至更大或更小

rotate()

旋转当前绘图

translate()

重新映射画布上的 (0,0) 位置

transform()

替换绘图的当前转换矩阵

setTransform()

将当前转换重置为单位矩阵。然后运行 transform()

Canvas的API-线条样式属性和方法

线条宽度、线帽和线条连接

画布为调整各种线条显示提供了几个选项。可以使用 lineWidth 属性来指定线条的宽度,用 lineCap 属性来指定的端点如何绘制,并且用 lineJoin 属性来指定线条如何连接。

<canvas id = "drawing" width = "200" height= "200">A drawing of something</canvas>

文本

属性 描述

font

设置或返回文本内容的当前字体属性

textAlign

设置或返回文本内容的当前对齐方式

textBaseline

设置或返回在绘制文本时使用的当前文本基线

方法 描述

fillText()

在画布上绘制“被填充的”文本

strokeText()

在画布上绘制文本(无填充)

measureText()

返回包含指定文本宽度的对象

属性                                    描述
lineCap                            设置或返回线条的结束端点样式
lineJoin                            设置或返回两条线相交时,所创建的拐角类型
lineWidth                            设置或返回当前的线条宽度
miterLimit                            设置或返回最大斜接长度

坐标空间和转换

默认情况下,一个画布的坐标空间使用画布的左上角 (0,0) 作为原点,x 值向右增加,y 值向下增加。这个坐标空间中的一个单位通常转换为像素。

然后,可以转换坐标空间,产生你在绘图操作中所指定的用来移动、缩放或旋转的任何坐标或范围。这通过 translate()、scale() 和 rotate() 方法来实现,它们会对画布的变换矩阵产生影响。由于坐标空间可以像这样转换,您传递给 lineTo() 这样方法的坐标可能无法用像素来度量。因此,Canvas API 使用浮点数而不是整数。

变换按照它们被指定的顺序相反的顺序来处理。例如,调用 scale() 之后,紧接着调用 translate(),这会首先变换坐标系统,然后再缩放。

(2)通过 JavaScript 来绘制

图像绘制

方法 描述

drawImage()

向画布上绘制图像、画布或视频

Canvas的API-矩形方法

组合

通常,图形是一个绘制于另一个的上面,新的图形使得在它之前绘制在其下方的图形变得模糊。这是一个画布中的默认行为。然而,您可以通过为 globalCompositeOperation 属性指定不同的值来执行很多有趣的操作,范围包括从 XOR 操作到增量或减暗图形区域。

  • canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。
  • 要在这块画布(canvas)上绘图,需要取得绘图上下文。而取得绘图上下文对象的引用,需要调用getContext()方法并传入上下文的名字。

像素操作

属性 描述

width

返回 ImageData 对象的宽度

height

返回 ImageData 对象的高度

data

返回一个对象,其包含指定的 ImageData 对象的图像数据

方法 描述

createImageData()

创建新的、空白的 ImageData 对象

getImageData()

返回 ImageData 对象,该对象为画布上指定的矩形复制像素数据

putImageData()

把图像数据(从指定的 ImageData 对象)放回画布上

方法                               描述
rect()                            创建矩形
fillRect()                            绘制"被填充"的矩形
strokeRect()                    绘制矩形(无填充)
clearRect()                    在给定的矩形内清除指定的像素

阴影

Canvas API 包含了可以自动为您所绘制的任何图形添加下拉阴影的属性。阴影的颜色可用 shadowColor 属性来指定,并且可以通过 shadowOffsetX 和 shadowOffsetY 属性来改变。另外,应用到阴影边缘的羽化量也可以使用 shadowBlur 属性来设置。

合成

属性 描述

globalAlpha

设置或返回绘图的当前 alpha 或透明值

globalCompositeOperation

设置或返回新图像如何绘制到已有的图像上

Canvas的API-路径方法

保存图形状态

save() 和 restore() 方法允许你保存和恢复一个 CanvasRenderingContext2D 对象的状态。save() 把当前状态推入到栈中,而 restore() 从栈的顶端弹出最近保存的状态,并且根据这些存储的值来设置当前绘图状态。

CanvasRenderingContext2D 对象的所有属性(除了画布的属性是一个常量)都是保存的状态的一部分。变换矩阵和剪切区域也是这个状态的一部分,但是当前路径和当前点并不是。

 

 

var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext){
    var context = drawing.getContext("2d");
    //更多代码
}

其他

方法 描述

save()

保存当前环境的状态

restore()

返回之前保存过的路径状态和属性

createEvent()

 

getContext()

 

toDataURL()

 

 

 

 

 

.

方法                                    描述
fill()                                    填充当前绘图(路径)
stroke()                            绘制已定义的路径
beginPath()                    起始一条路径,或重置当前路径
moveTo()                            把路径移动到画布中的指定点,不创建线条
closePath()                    创建从当前点回到起始点的路径
lineTo()                            添加一个新点,创建从该点到最后指定点的线条
clip()                                    从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo()            创建二次贝塞尔曲线
bezierCurveTo()            创建三次方贝塞尔曲线
arc()                                    创建弧/曲线(用于创建圆形或部分圆)
arcTo()                            创建两切线之间的弧/曲线
isPointInPath()              如果指定的点位于当前路径中,返回布尔值

CanvasRenderingContext2D 对象的属性

  • 使用toDataURL()方法,可以导出在<canvas>元素上绘制的图像。这个方法接受一个参数,即图像的MIME 类型格式,而且适合用于创建图像的任何上下文。

Canvas的API-转换方法

canvas 属性

这个环境可以绘制于其上的 Canvas 元素。

方法                              描述
scale()                           缩放当前绘图至更大或更小
rotate()                           旋转当前绘图
translate()                   重新映射画布上的 (0,0) 位置
transform()                   替换绘图的当前转换矩阵
setTransform()                   将当前转换重置为单位矩阵。然后运行 transform()

fillStyle 属性

用来填充路径的当前的颜色、模式或渐变。这个属性可以设置为一个字符串或者一个 CanvasGradient 对象 或 CanvasPattern 对象。当设置为一个字符串时,它被解析为一个 CSS 颜色值并且用来进行实心填充。当设置为一个 CanvasGradient 或 CanvasPattern 对象,通过使用指定的渐变或模式来完成填充。

var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext){

    //取得图像的数据URI
    var imgURI = drawing.toDataURL("image/png");

    //显示图像
    var image = document.createElement("img");
    image.src = imgURI;
    document.body.appendChild(image);
}

Canvas的API-文本属性和方法

globalAlpha 属性

指定在画布上绘制的内容的不透明度。这个值的范围在 0.0(完全透明)和 1.0(完全不透明)之间。默认值为 1.0。

2、2D上下文

属性                            描述
font                                  设置或返回文本内容的当前字体属性
textAlign                          设置或返回文本内容的当前对齐方式
textBaseline                  设置或返回在绘制文本时使用的当前文本基线

globalCompositeOperation 属性

指定颜色如何与画布上已有的颜色组合(合成)。

  • 使用2D 绘图上下文提供的方法,可以绘制简单的2D 图形,比如矩形、弧线和路径。
  • 2D 上下文的坐标开始于<canvas>元素的左上角,原点坐标是(0,0)。所有坐标值都基于这个原点计算,x 值越大表示越靠右,y 值越大表示越靠下。
  • 默认情况下,width 和height 表示水平和垂直两个方向上可用的像素数目。

方法                                  描述
fillText()                          在画布上绘制"被填充的"文本
strokeText()                  在画布上绘制文本(无填充)
measureText()            返回包含指定文本宽度的对象

lineCap 属性

指定线条的末端如何绘制。合法的值是 "butt"、"round" 和 "square"。默认值是 "butt"。

2.1 填充和描边

Canvas的API-图像绘制方法

lineJoin 属性

指定两条线条如何连接。合法的值是 "round"、"bevel" 和 "miter"。默认值是 "miter"。

  • 填充,就是用指定的样式(颜色、渐变或图像)填充图形;
  • 描边,就是只在图形的边缘画线。

方法                             描述
drawImage()                  向画布上绘制图像、画布或视频  chrome不支持

lineWidth 属性

指定了画笔(绘制线条)操作的线条宽度。默认值是 1.0,并且这个属性必须大于 0.0。较宽的线条在路径上居中,每边有线条宽的一半。

属性 描述
fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle 设置或返回用于笔触的颜色、渐变或模式

Canvas的API-像素操作方法和属性

miterLimit 属性

当 lineJoin 属性为 "miter" 的时候,这个属性指定了斜连接长度和线条宽度的最大比率。

  • 这两个属性的值可以是字符串、渐变对象或模式对象,而且它们的默认值都是"#000000"。
  • 如果为它们指定表示颜色的字符串值,可以使用CSS中指定颜色值的任何格式,包括颜色名、十六进制码、rgb、rgba、hsl 或hsla。

属性                              描述
width                          返回 ImageData 对象的宽度
height                          返回 ImageData 对象的高度
data                                  返回一个对象,其包含指定的 ImageData 对象的图像数据

shadowBlur 属性

指定羽化阴影的程度。默认值是 0。

方法                           描述
createImageData()          创建新的、空白的 ImageData 对象
getImageData()          返回 ImageData 对象,该对象为画布上指定的矩形复制像素数据
putImageData()          把图像数据(从指定的 ImageData 对象)放回画布上

shadowColor 属性

把阴影的颜色指定为一个 CSS 字符串或 Web 样式字符串,并且可以包含一个 alpha 部分来表示透明度。默认值是 black。

var drawing = document.getElementById("drawing");

//确定浏览器支持<canvas>元素
if (drawing.getContext){
    var context = drawing.getContext("2d");
    context.strokeStyle = "red";
    context.fillStyle = "#0000ff";
}

Canvas的API-图像合成属性

shadowOffsetX, shadowOffsetY 属性

指定阴影的水平偏移和垂直偏移。较大的值使得阴影化的对象似乎漂浮在背景的较高位置上。默认值是 0。

2.2 绘制矩形

属性                                  描述
globalAlpha                  设置或返回绘图的当前 alpha 或透明值
globalCompositeOperation        设置或返回新图像如何绘制到已有的图像上

strokeStyle 属性

指定了用于画笔(绘制)路径的颜色、模式和渐变。这个属性可能是一个字符串,或者一个 CanvasGradient 对象 或 CanvasPattern 对象。如果是一个字符串,它被解析为一个 CSS 颜色值,并且画笔用所得的实色来绘制。如果这个属性的值是一个 CanvasGradient 对象或 CanvasPattern 对象,画笔使用这个渐变或模式来实现。

 

  • 矩形是唯一一种可以直接在2D上下文中绘制的形状。
  • 与矩形有关的有四个方法。

CanvasRenderingContext2D 对象的方法

方法 描述
arc() 用一个中心点和半径,为一个画布的当前子路径添加一条弧线。
arcTo() 使用目标点和一个半径,为当前的子路径添加一条弧线。
beginPath() 开始一个画布中的一条新路径(或者子路径的一个集合)。
bezierCurveTo() 为当前的子路径添加一个三次贝塞尔曲线。
clearRect() 在一个画布的一个矩形区域中清除掉像素。
clip() 使用当前路径作为连续绘制操作的剪切区域。
closePath() 如果当前子路径是打开的,就关闭它。
createLinearGradient() 返回代表线性颜色渐变的一个 CanvasGradient 对象。
createPattern() 返回代表贴图图像的一个 CanvasPattern 对象。
createRadialGradient() 返回代表放射颜色渐变的一个 CanvasGradient 对象。
drawImage() 绘制一幅图像。
fill() 使用指定颜色、渐变或模式来绘制或填充当前路径的内部。
fillRect() 绘制或填充一个矩形。
lineTo() 为当前的子路径添加一条直线线段。
moveTo() 设置当前位置并开始一条新的子路径。
quadraticCurveTo() 为当前路径添加一条贝塞尔曲线。
rect() 为当前路径添加一条矩形子路径。
restore() 为画布重置为最近保存的图像状态。
rotate() 旋转画布。
save() 保存 CanvasRenderingContext2D 对象的属性、剪切区域和变换矩阵。
scale() 标注画布的用户坐标系统。
stroke() 沿着当前路径绘制或画一条直线。
strokeRect() 绘制(但不填充)一个矩形。
translate() 转换画布的用户坐标系统。

 

方法 描述
rect() 创建矩形
fillRect() 绘制“被填充”的矩形
strokeRect() 绘制矩形(无填充)
clearRect() 在给定的矩形内清除指定的像素

globalCompositeOperation 属性

globalCompositeOperation 属性说明如何在画布上组合颜色。

 

  • 这几个方法都能接收4个参数

语法

CanvasRenderingContext2D.globalCompositeOperation
参数 描述
x 矩形左上角的 x 坐标
y 矩形左上角的 y 坐标
width 矩形的宽度,以像素计
height 矩形的高度,以像素计

描述

globalCompositeOperation 属性说明了绘制到画布上的颜色是如何与画布上已有的颜色组合(或“合成”)的。

下面的表格列出了可能的值及其含义。这些值中的 "source" 一词,指的是将要绘制到画布上的颜色,而 "destination" 指的是画布上已经存在的颜色。默认值是 "source-over"。

含义
"copy" 只绘制新图形,删除其他所有内容。
"darker" 在图形重叠的地方,颜色由两个颜色值相减后决定。
"destination-atop" 已有的内容只有在它和新的图形重叠的地方保留。新图形绘制于内容之后。
"destination-in" 在新图形以及已有画布重叠的地方,已有内容都保留。所有其他内容成为透明的。
"destination-out" 在已有内容和新图形不重叠的地方,已有内容保留。所有其他内容成为透明。
"destination-over" 新图形绘制于已有内容的后面。
"lighter" 在图形重叠的地方,颜色由两种颜色值的加值来决定。
"source-atop" 只有在新图形和已有内容重叠的地方,才绘制新图形。
"source-in" 在新图形以及已有内容重叠的地方,新图形才绘制。所有其他内容成为透明。
"source-out" 只有在和已有图形不重叠的地方,才绘制新图形。
"source-over" 新图形绘制于已有图形的顶部。这是默认的行为。
"xor" 在重叠和正常绘制的其他地方,图形都成为透明的。

 

<!--示例画布-->
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

lineCap 属性

lineCap 属性指定线段的末端如何绘制。

 

(1) rect()

语法

CanvasRenderingContext2D.lineCap
  • 使用 stroke() 或 fill() 方法在画布上实际地绘制矩形。
  • javascript 语法

描述

lineCap 属性指定线段如何结束。只有绘制较宽线段时,它才有效。这个属性的合法值如下表所示。默认值是:"butt"。

含义
"butt" 这个默认值指定了线段应该没有线帽。线条的末点是平直的而且和线条的方向正交,这条线段在其端点之外没有扩展。
"round" 这个值指定了线段应该带有一个半圆形的线帽,半圆的直径等于线段的宽度,并且线段在端点之外扩展了线段宽度的一半。
"square" 这个值表示线段应该带有一个矩形线帽。这个值和 "butt" 一样,但是线段扩展了自己的宽度的一半。

 

lineJoin 属性

lineJoin 属性说明如何绘制交点。

 

context.rect(x,y,width,height);

语法

CanvasRenderingContext2D.lineJoin
  • 示例

描述

当一个路径包含了线段或曲线相交的交点的时候,lineJoin 属性说明如何绘制这些交点。只有当绘制具有宽度的线条的时候,这一属性的效果才能表现出来。

这一属性的默认值是 "miter",它说明了两条线段的外边缘一直扩展到它们相交。当两条线段以一个锐角相交,斜角连接可能变得很长。miterLimit 属性为一个斜面的长度设置了上限。超过这一限制,斜面就变成斜角了。

值 "round" 说明定点的外边缘应该和一个填充的弧接合,这个弧的直径等于线段的宽度。"bevel" 值说明顶点的外边缘应该和一个填充的三角形相交。

 

miterLimit 属性

miterLimit 属性说明如何绘制交点。

 

/**通过 rect() 方法来创建三个矩形**/

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

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

// 绿色矩形
ctx.beginPath();
ctx.lineWidth="4";
ctx.strokeStyle="green";
ctx.rect(30,30,50,50);
ctx.stroke();

// 蓝色矩形
ctx.beginPath();
ctx.lineWidth="10";
ctx.strokeStyle="blue";
ctx.rect(50,50,150,80);
ctx.stroke();

语法

CanvasRenderingContext2D.miterLimit

图片 1

描述

当宽线条使用设置为 "miter" 的 lineJoin 属性绘制并且两条线段以锐角相交的时候,所得的斜面可能相当长。当斜面太长,就会变得不协调。miterLimit 属性为斜面的长度设置一个上限。这个属性表示斜面长度和线条长度的比值。默认是 10,意味着一个斜面的长度不应该超过线条宽度的 10 倍。如果斜面达到这个长度,它就变成斜角了。当 lineJoin 为 "round" 或 "bevel" 的时候,这个属性无效。

 

rect().png

arc() 方法

arc() 方法使用一个中心点和半径,为一个画布的当前子路径添加一条弧。

 

(2)fillRect()

语法

arc(x, y, radius, startAngle, endAngle, counterclockwise)
  • fillRect()方法在画布上绘制的矩形会填充指定的颜色。填充的颜色通过fillStyle 属
    性指定。
  • javascript 语法

参数

参数 描述
x, y 描述弧的圆形的圆心的坐标。
radius 描述弧的圆形的半径。
startAngle, endAngle

沿着圆指定弧的开始点和结束点的一个角度。这个角度用弧度来衡量。

沿着 X 轴正半轴的三点钟方向的角度为 0,角度沿着逆时针方向而增加。

counterclockwise 弧沿着圆周的逆时针方向(TRUE)还是顺时针方向(FALSE)遍历。

描述

这个方法的头 5 个参数指定了圆周的一个起始点和结束点。调用这个方法会在当前点和当前子路径的起始点之间添加一条直线。接下来,它沿着圆周,在子路径的起始点和结束点之间添加弧。

最后一个 counterclockwise 参数指定了圆应该沿着哪个方向遍历来连接起始点和结束点。这个方法将当前位置设置为弧的终点。

 

context.fillRect(x,y,width,height);

arcTo() 方法

arcTo() 方法使用使用切点和一个半径,来为当前子路径添加一条圆弧。

 

  • 示例

语法

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

参数

参数 描述
x1, y1 点 P1 的坐标。
x2, y2 点 P2 的坐标。
radius 定义圆弧的圆的半径。
/**绘制填充矩形**/

var c=document.getElementById("myCanvas");
var context=c.getContext("2d");

//绘制红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);

//绘制半透明的蓝色矩形
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30, 30, 50, 50);

描述

这个方法为当前的子路径添加了一条圆弧,但是,它所描述的这条圆弧和 arc() 方法所描述的圆弧大不相同。添加给路径的圆弧是具有指定 radius 的圆的一部分。该圆弧有一个点与当前位置到 P1 的线段相切,还有一个点和从 P1 到 P2 的线段相切。这两个切点就是圆弧的起点和终点,圆弧绘制的方向就是连接这两个点的最短圆弧的方向。

在很多常见的应用中,圆弧开始于当前位置而结束于 P2,但情况并不总是这样。如果当前的位置和圆弧的起点不同,这个方法添加了一条从当前位置到圆弧起点的直线。这个方法总是将当前位置设置为圆弧的终点。

图片 2

实例

可以用下面的代码绘制一个矩形的右上角(圆角):

c.moveTo(10,10);  //在左上方开始  c.lineTo(90,10);  //到达圆角开始点的水平线  c.arcTo(100,10,100,20,10); //圆角  c.lineTo(100,100);  //到达右下方的垂直线

fillRect.png

 

(3)strokeRect()

beginPath() 方法

beginPath() 方法在一个画布中开始子路径的一个新的集合。

 

  • strokeRect() 方法绘制矩形(不填色)。笔触的默认颜色是黑色。
  • strokeRect()方法在画布上绘制的矩形会使用指定的颜色描边。描边颜色通过strokeStyle 属性指定。
  • javascript 语法

语法

beginPath()

描述

beginPath() 丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为 (0,0)。

当一个画布的环境第一次创建,beginPath() 方法会被显式地调用。

 

context.strokeRect(x,y,width,height);

bezierCurveTo() 方法

bezierCurveTo() 方法在一个画布中开始子路径的一个新的集合。

 

  • 示例

语法

bezierCurveTo(cpX1, cpY1, cpX2, cpY2, x, y)

参数

参数 描述
cpX1, cpY1 和曲线的开始点(当前位置)相关联的控制点的坐标。
cpX2, cpY2 和曲线的结束点相关联的控制点的坐标。
x, y 曲线的结束点的坐标。
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");

//绘制红色描边矩形
context.strokeStyle = "#ff0000";
context.strokeRect(10, 10, 50, 50);
//绘制半透明的蓝色描边矩形
context.strokeStyle = "rgba(0,0,255,0.5)";
context.strokeRect(30, 30, 50, 50);

描述

bezierCurveTo() 为一个画布的当前子路径添加一条三次贝塞尔曲线。这条曲线的开始点是画布的当前点,而结束点是 (x, y)。两条贝塞尔曲线控制点 (cpX1, cpY1) 和 (cpX2, cpY2) 定义了曲线的形状。当这个方法返回的时候,当前的位置为 (x, y)。

 

图片 3

clearRect() 方法

clearRect() 方法删除一个画布的矩形区域。

 

strokeRect.png

语法

clearRect(x, y, width, height)

(4)clearRect()

参数

参数 描述
x, y 矩形的左上角的坐标。
width, height 矩形的尺寸。
  • clearRect()方法用于清除画布上的矩形区域。
  • 本质上,这个方法可以把绘制上下文中的某一矩形区域变透明。通过绘制形状然后再清除指定区域,就可以生成有意思的效果。
  • javascript 语法

描述

clearRect() 方法擦除了指定的矩形,并且用一个透明的颜色填充它。

 

clip() 方法

clip() 方法设置一个画布的剪切路径。

 

context.clearRect(x,y,width,height);

语法

clip()
  • 示例

描述

clip() 方法用当前剪切路径来剪切当前路径,然后使用剪切后的路径作为新的剪切路径。注意,没有方法来扩大剪切路径。如果想要一个临时的剪切路径,应该先调用 save() 以便使用 restore() 恢复最初的剪切路径。一个画布的默认剪切路径就是画布的矩形自身。

 

closePath() 方法

closePath() 方法关闭一条打开的子路径。

 

var c=document.getElementById("myCanvas");
var context=c.getContext("2d");

//绘制红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);

//绘制半透明的蓝色矩形
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30, 30, 50, 50);

//在两个矩形重叠的地方清除一个小矩形
context.clearRect(40, 40, 10, 10);

语法

closePath()

图片 4

描述

如果画布的子路径是打开的,closePath() 通过添加一条线条连接当前点和子路径起始点来关闭它。

如果子路径已经闭合了,这个方法不做任何事情。

一旦子路径闭合,就不能再为其添加更多的直线或曲线了。要继续向该路径添加,需要通过调用 moveTo() 开始一条新的子路径。

注释:不需要在勾勒或填充一条路径之前调用 closePath()。当填充的时候(并且当你调用 clip() 的时候),路径是隐式闭合的。

 

clearRect.png

createLinearGradient() 方法

createLinearGradient() 方法创建一条线性颜色渐变。

 

2.3 绘制路径

语法

createLinearGradient(xStart, yStart, xEnd, yEnd)
  • 2D 绘制上下文支持很多在画布上绘制路径的方法。通过路径可以创造出复杂的形状和线条。

参数

参数 描述
xStart, yStart 渐变的起始点的坐标。
xEnd, yEnd 渐变的结束点的坐标。
方法 描述
fill() 填充当前绘图(路径)
stroke() 绘制已定义的路径
beginPath() 起始一条路径,或重置当前路径
moveTo() 把路径移动到画布中的指定点,不创建线条
closePath() 创建从当前点回到起始点的路径
lineTo() 添加一个新点,然后在画布中创建从该点到最后指定点的线条
clip() 从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo() 创建二次贝塞尔曲线
bezierCurveTo() 创建三次方贝塞尔曲线
arc() 创建弧/曲线(用于创建圆形或部分圆)
arcTo() 创建两切线之间的弧/曲线
isPointInPath() 如果指定的点位于当前路径中,则返回 true,否则返回 false

返回值

表示一个线性颜色渐变的一个 CanvasGradient 对象。

(1)fill()

描述

这个方法创建并返回了一个新的 CanvasGradient 对象,它在指定的起始点和结束点之间线性地内插颜色值。注意,这个方法并没有为渐变指定任何颜色。使用返回对象的 addColorStop() 来做到这一点。要使用一个渐变来勾勒线条或填充区域,只需要把 CanvasGradient 对象赋给 strokeStyle 属性或 fillStyle 属性即可。

 

  • fill() 方法填充当前的图像(路径)。默认颜色是黑色。
  • 使用 fillStyle 属性来填充另一种颜色/渐变。
  • javascript 语法

createPattern() 方法

createPattern() 方法为贴图图像创建一个模式。

 

语法

createPattern(image, repetitionStyle)
context.fill();

参数

参数 描述
image

需要贴图的图像。

这个参数通常是一个 Image 对象,但是也可以使用一个 Canvas 元素。

repetitionStyle 说明图像如何贴图。可能的值如下所示:
  • "repeat" - 在各个方向上都对图像贴图。默认值。
  • "repeat-x" - 只在 X 方向上贴图。
  • "repeat-y" - 只在 Y 方向上贴图。
  • "no-repeat" - 不贴图,只使用它一次。
  • 示例

返回值

表示模式的一个 CanvasPattern 对象。

描述

createPattern() 方法创建并返回一个 CanvasPattern 对象,该对象表示一个贴图图像所定义的模式。要使用一个模式来勾勒线条或填充区域,可以把一个 CanvasPattern 对象用作 strokeStyle 属性或 fillStyle 属性的值。

 

var c=document.getElementById("myCanvas");
var context = c.getContext('2d');
context.rect(20,20,150,100)
context.fillStyle = "green";
context.fill();

createRadialGradient() 方法

createRadialGradient() 方法创建一条放射颜色渐变。

 

图片 5

语法

createLinearGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)

fill()

参数

参数 描述
xStart, yStart 开始圆的圆心的坐标。
radiusStart 开始圆的直径。
xEnd, yEnd 结束圆的圆心的坐标。
radiusEnd 结束圆的直径。

(2)stroke()

返回值

表示一个放射性颜色渐变的一个 CanvasGradient 对象。

  • stroke() 方法会实际地绘制出通过moveTo()和lineTo()方法定义的路径。默认颜色是黑色。
  • 使用 strokeStyle 属性来绘制另一种颜色/渐变。
  • javascript 语法

描述

这个方法创建并返回了一个新的 CanvasGradient 对象,该对象在两个指定圆的圆周之间放射性地插值颜色。注意,这个方法并没有指定任何用来渐变的颜色。使用返回对象的 addColorStop() 方法做到这一点。要使用一个渐变来勾勒线条或填充区域,只需要把 CanvasGradient 对象赋给 strokeStyle 属性或 fillStyle 属性即可。

放射性渐变的绘制方法:使用第一个圆的圆周在偏移 0 处的颜色和第二个圆的圆周在偏移 1 处的颜色,在两个位置之间的圆上插入颜色值(红色、绿色、蓝色和 alpha)。

 

drawImage() 方法

drawImage() 方法绘制一幅图像。

 

context.stroke();

语法

drawImage(image, x, y)  drawImage(image, x, y, width, height)  drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight,            destX, destY, destWidth, destHeight)
  • 示例

参数

参数 描述
image

所要绘制的图像。

这必须是表示 <img> 标记或者屏幕外图像的 Image 对象,或者是 Canvas 元素。

x, y 要绘制的图像的左上角的位置。
width, height 图像所应该绘制的尺寸。指定这些参数使得图像可以缩放。
sourceX, sourceY 图像将要被绘制的区域的左上角。这些整数参数用图像像素来度量。
sourceWidth, sourceHeight 图像所要绘制区域的大小,用图像像素表示。
destX, destY 所要绘制的图像区域的左上角的画布坐标。
destWidth, destHeight 图像区域所要绘制的画布大小。

描述

drawImage() 方法有 3 个变形。第一个变形把整个图像复制到画布,将其放置到指定点的左上角,并且将每个图像像素映射成画布坐标系统的一个单元。第二个变形也把整个图像复制到画布,但是允许您用画布单位来指定想要的图像的宽度和高度。第三个变形则是完全通用的,它允许您指定图像的任何矩形区域并复制它,对画布中的任何位置都可进行任何的缩放。

传递给 drawImage() 方法的图像必须是 Image 对象或 Canvas 元素。一个 Image 对象能够表示文档中的一个 <img> 标记或者使用 Image() 构造函数所创建的一个屏幕外图像。

 

var c=document.getElementById("myCanvas");
var context = c.getContext('2d');
context.beginPath();
context.moveTo(20,20);
context.lineTo(20,100);
context.lineTo(70,100);
context.strokeStyle = "green";
context.stroke();

fill() 方法

fill() 方法填充路径。

 

图片 6

语法

fill()

stroke().png

描述

fill() 方法使用 fillStyle 属性所指定的颜色、渐变和模式来填充当前路径。这一路径的每一条子路径都单独填充。任何未闭合的子路径都被填充,就好像已经对他么调用了 closePath() 方法一样(但是,注意,实际上没有这么让子路径成为闭合的)。

画布使用“非零匝数规则”来确定哪个点在路径的内部,而哪个点在路径的外部。这一规定的细节超出了本参考页的范围,但是,它们通常只和那些与自身相交的复杂路径相交。

填充一条路径并不会清除该路径。你可以在调用 fill() 之后再次调用 stroke(),而不需要重新定义该路径。

 

(3)beginPath()、moveTo()、lineTo()

fillRect() 方法

fillRect() 方法填充一个矩形。

 

  • beginPath() 方法开始一条路径,或重置当前的路径。
  • moveTo(x, y):将绘图游标移动到(x,y),不画线。
  • lineTo(x, y):从上一点开始绘制一条直线,到(x,y)为止。
  • javascript 语法

语法

fillRect(x, y, weight, height)

参数

参数 描述
x, y 矩形的左上角的坐标。
weight, height 矩形的大小。
context.beginPath();
context.moveTo(x,y);
context.lineTo(x,y);

描述

fillRect() 方法使用 fillStyle 属性所指定的颜色、渐变和模式来填充指定的矩形。

fillRect() 方法的当前实现还清除了路径,就好像 beginPath() 已经调用了。这一令人惊讶的行为可能不会标准化,因此不应该指望它。

 

  • 示例

lineTo() 方法

lineTo() 方法为当前子路径添加一条直线。

 

语法

lineTo(x, y)
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.beginPath();              
ctx.strokeStyle="red";  // 绿色路径
ctx.moveTo(0,75);
ctx.lineTo(300,75);
ctx.stroke();  // 进行绘制

ctx.beginPath();
ctx.strokeStyle="blue";  // 紫色路径
ctx.moveTo(150,0);
ctx.lineTo(150,150);            
ctx.stroke();  // 进行绘制

参数

参数 描述
x, y 直线的终点的坐标。

图片 7

描述

lineTo() 方法为当前子路径添加一条直线。这条直线从当前点开始,到 (x, y) 结束。当方法返回时,当前点是 (x,y)。

 

beginPath()&moveTo()&lineTo().png

moveTo() 方法

moveTo() 方法设置当前位置并开始一条新的子路径。

 

(4)closePath()

语法

moveTo(x, y)
  • closePath() 方法创建从当前点到开始点的路径。

  • 使用 stroke() 方法在画布上绘制确切的路径。

  • 使用 fill() 方法来填充图像(默认是黑色)。请使用fillStyle属性来填充另一个颜色/渐变。

  • javascript 语法

参数

参数 描述
x, y 新的当前点的坐标。

描述

moveTo() 方法将当前位置设置为 (x, y) 并用它作为第一点创建一条新的子路径。如果之前有一条子路径并且它包含刚才的那一点,那么从路径中删除该子路径。

 

context.closePath();

quadraticCurveTo() 方法

quadraticCurveTo() 方法为当前路径添加一条贝塞尔曲线。

 

  • 示例

语法

quadraticCurveTo(cpX, cpY, x, y)

参数

参数 描述
cpX, cpY 控制点的坐标。
x, y 曲线终点的坐标。
var c = document.getElementById("myCanvas");
var context = c.getContext('2d');
context.beginPath();
context.moveTo(20,20);
context.lineTo(20,100);
context.lineTo(100,100);
context.closePath();
context.stroke();
context.fillStyle = "green";
context.fill();

描述

quadraticCurveTo() 方法为当前的子路径添加一条贝塞尔曲线。这条曲线从当前点开始,到 (x,y) 结束。控制点 (cpX,cpY) 说明了这两个点之间的曲线的形状(贝塞尔曲线的数学原理超过了本参考页的范围)。

当 quadraticCurveTo() 方法返回时,当前位置是 (x,y)。

 

图片 8

rect() 方法

rect() 方法为当前路径添加一条矩形子路径。

 

closePath().png

语法

quadraticCurveTo(x, y, width, height)

(5)clip()

参数

参数 描述
x, y 矩形的左上角的坐标。
width, height 矩形的大小。
  • clip() 方法从原始画布中剪切任意形状和尺寸。
  • javascript语法

描述

rect() 方法为路径添加了一个矩形。这个矩形是路径的一个子路径并且没有和路径中的任何其他子路径相连。

当 rect() 方法返回时,当前位置是 (0,0)。

 

restore() 方法

restore() 方法将绘图状态置为保存值。

 

context.clip();

本文由巴黎人游戏官网发布于网络资讯,转载请注明出处:圆形渐变,对象提供了一组用来在画布上绘制的

关键词: