Html5--Canvas
Html5--Canvas
Html5--Canvas
Html5--Canvas :
:
:
: Html5
Html5
Html5
Html5 绘图画布 (
(
(
( 中文 :https://developer.mozilla.org/cn/Canvas_tutorial)--(
:https://developer.mozilla.org/cn/Canvas_tutorial)--(
:https://developer.mozilla.org/cn/Canvas_tutorial)--(
:https://developer.mozilla.org/cn/Canvas_tutorial)--( 日文 :http://www.html5.jp)--(
:http://www.html5.jp)--(
:http://www.html5.jp)--(
:http://www.html5.jp)--( 日文 :http://www.html5.jp/canvas/index.html)
:http://www.html5.jp/canvas/index.html)
:http://www.html5.jp/canvas/index.html)
:http://www.html5.jp/canvas/index.html)
函数
定义 说明
全
局
url
url
url
url
=
=
=
=
canvas
canvas
canvas
canvas
.
.
.
. toDataURL
toDataURL
toDataURL
toDataURL (
(
(
( [
[
[
[
type
type
type
type
,
,
,
, ...
...
...
... ])
])
])
])
输出图像到一个可以与
Html
Html
Html
Html
交互的
URL
URL
URL
URL
context
context
context
context
=
=
=
=
canvas
canvas
canvas
canvas
.
.
.
. getContext
getContext
getContext
getContext (
(
(
(
contextId
contextId
contextId
contextId
)
)
)
)
获得绘图上下文 ( 目前
contextId
contextId
contextId
contextId
只可以为
"2d",
"2d",
"2d",
"2d",
::
::
::
::
Html5-canvas
Html5-canvas
Html5-canvas
Html5-canvas
标签还不支持
"3d"
"3d"
"3d"
"3d"
绘图 )
路
径
context
context
context
context
.
.
.
. beginPath
beginPath
beginPath
beginPath ()
()
()
() 开始记录绘制路径
context
context
context
context
.
.
.
. moveTo
moveTo
moveTo
moveTo (
(
(
(
x
x
x
x
,
,
,
,
y
y
y
y
)
)
)
) 将绘制焦点移动到
( object x, object y)
指定的坐标处
,
并开始一条新的子路径
context
context
context
context
.
.
.
. closePath
closePath
closePath
closePath ()
()
()
() 结束一个子路径 ( 此时可以选择
context
context
context
context
.
.
.
. fill
fill
fill
fill ()
()
()
() /
context
context
context
context
.
.
.
. stroke
stroke
stroke
stroke ()
()
()
() /
/
/
/
context
context
context
context
.
.
.
. clip
clip
clip
clip ()
()
()
() 等操作来实现具体的路径绘制 )
context
context
context
context
.
.
.
. lineTo
lineTo
lineTo
lineTo (
(
(
(
x
x
x
x
,
,
,
,
y
y
y
y
)
)
)
) 向当前路径增加一条由当前绘制焦点到 ( object x, object y) 指定坐标处的线段
context
context
context
context
.
.
.
. quadraticCurveTo
quadraticCurveTo
quadraticCurveTo
quadraticCurveTo (
(
(
(
cpx
cpx
cpx
cpx
,
,
,
,
cpy
cpy
cpy
cpy
,
,
,
,
x
x
x
x
,
,
,
,
y
y
y
y
)
)
)
) 向当前路径增加一条以当前绘制点为起点 , ( object x, object y) 为终点 , ( cpx , cpy ) 为控制点的二次贝赛尔曲线
context
context
context
context
.
.
.
. bezierCurveTo
bezierCurveTo
bezierCurveTo
bezierCurveTo (
(
(
(
cp1x
cp1x
cp1x
cp1x
,
,
,
,
cp1y
cp1y
cp1y
cp1y
,
,
,
,
cp2x
cp2x
cp2x
cp2x
,
,
,
,
cp2y
cp2y
cp2y
cp2y
,
,
,
,
x
x
x
x
,
,
,
,
y
y
y
y
)
)
)
)
向当前路径增加一条以当前绘制点为起点 , ( x , y ) 为终点 , ( cpx1 , cpy1 ) - ( cpx2 , cpy2 ) , 为控制点的三次贝赛尔曲线
context
context
context
context
.
.
.
. arcTo
arcTo
arcTo
arcTo (
(
(
(
x1
x1
x1
x1
,
,
,
,
y1
y1
y1
y1
,
,
,
,
x2
x2
x2
x2
,
,
,
,
y2
y2
y2
y2
,
,
,
,
radius
radius
radius
radius
)
)
)
)
先向当前路径增加一条由当前绘制焦点到 ( x 1 , y 1 ) 的线段 , 再以
radius
radius
radius
radius
为半径绘制一条由 ( x 1 , y 1 ) 到 ( x 2 , y 2 ) 弧
context
context
context
context
.
.
.
. arc
arc
arc
arc (
(
(
(
x
x
x
x
,
,
,
,
y
y
y
y
,
,
,
,
radius
radius
radius
radius
,
,
,
,
startAngle
startAngle
startAngle
startAngle
,
,
,
,
endAngle
endAngle
endAngle
endAngle
,
,
,
,
anticlockwise
anticlockwise
anticlockwise
anticlockwise
)
)
)
) 绘制一条弧线 ; ( x , y ) 圆心 ,
radius
radius
radius
radius
半径
startAngle
startAngle
startAngle
startAngle
起始弧度 ,
endAngle
endAngle
endAngle
endAngle
终止弧度 ,
anticlockwise
anticlockwise
anticlockwise
anticlockwise
:(bool) 旋转方向
context
context
context
context
.
.
.
. rect
rect
rect
rect (
(
(
(
x
x
x
x
,
,
,
,
y
y
y
y
,
,
,
,
w
w
w
w
,
,
,
,
h
h
h
h
)
)
)
) 通过指定起点 ( x , y ) 和宽度 , 高度的一绘向量 (
w
, h ) 绘制一个矩形
context
context
context
context
.
.
.
. fill
fill
fill
fill ()
()
()
() 使用全局填充样式
context
context
context
context
.
.
.
. fillStyle
fillStyle
fillStyle
fillStyle 及其它全局样式 , 如 : globalAlpha
globalAlpha
globalAlpha
globalAlpha 等填充当前路径 ( 自动封闭未封闭路径 )
context
context
context
context
.
.
.
. stroke
stroke
stroke
stroke ()
()
()
() 使用全局勾画样式
context
context
context
context
.
.
.
. strokeStyle
strokeStyle
strokeStyle
strokeStyle 及其它全局样式 , 如 : globalAlpha
globalAlpha
globalAlpha
globalAlpha 等勾画当前路径 ( 可理解为绘制边框 )
context
context
context
context
.
.
.
. clip
clip
clip
clip ()
()
()
() 对当前路径内侧区域进行剪辑
context
context
context
context
.
.
.
. isPointInPath
isPointInPath
isPointInPath
isPointInPath (
(
(
(
x
x
x
x
,
,
,
,
y
y
y
y
)
)
)
)
测试 ( x , y ) 指定的点是否在当前路径内
区
域
context
context
context
context
.
.
.
. clearRect
clearRect
clearRect
clearRect (
(
(
(
x
x
x
x
,
,
,
,
y
y
y
y
,
,
,
,
w
w
w
w
,
,
,
,
h
h
h
h
)
)
)
) 清除当前绘图上下文中指定的矩形区域的内容 , 参数说明请参考
context
context
context
context
.
.
.
. rect
rect
rect
rect (
(
(
(
x
x
x
x
,
,
,
,
y
y
y
y
,
,
,
,
w
w
w
w
,
,
,
,
h
h
h
h
)
)
)
)
context
context
context
context
.
.
.
. fillRect
fillRect
fillRect
fillRect (
(
(
(
x
x
x
x
,
,
,
,
y
y
y
y
,
,
,
,
w
w
w
w
,
,
,
,
h
h
h
h
)
)
)
) 填充一个矩形区域 , 参数说明请参考
context
context
context
context
.
.
.
. rect
rect
rect
rect (
(
(
(
x
x
x
x
,
,
,
,
y
y
y
y
,
,
,
,
w
w
w
w
,
,
,
,
h
h
h
h
)
)
)
)
context
context
context
context
.
.
.
. strokeRect
strokeRect
strokeRect
strokeRect (
(
(
(
x
x
x
x
,
,
,
,
y
y
y
y
,
,
,
,
w
w
w
w
,
,
,
,
h
h
h
h
)
)
)
)
勾画一个矩形 , 参数说明请参考
context
context
context
context
.
.
.
. rect
rect
rect
rect (
(
(
(
x
x
x
x
,
,
,
,
y
y
y
y
,
,
,
,
w
w
w
w
,
,
,
,
h
h
h
h
)
)
)
)
渐
变
效
果
gradient
gradient
gradient
gradient
.
.
.
. addColorStop
addColorStop
addColorStop
addColorStop (
(
(
(
offset
offset
offset
offset
,
,
,
,
color
color
color
color
)
)
)
)
向一个渐变结构中添加参考点
gradient
gradient
gradient
gradient
=
=
=
=
context
context
context
context
.
.
.
. createLinearGradient
createLinearGradient
createLinearGradient
createLinearGradient (
(
(
(
x0
x0
x0
x0
,
,
,
,
y0
y0
y0
y0
,
,
,
,
x1
x1
x1
x1
,
,
,
,
y1
y1
y1
y1
)
)
)
) 创建一个线性渐变结构
gradient
gradient
gradient
gradient
=
=
=
=
context
context
context
context
.
.
.
. createRadialGradient
createRadialGradient
createRadialGradient
createRadialGradient (
(
(
(
x0
x0
x0
x0
,
,
,
,
y0
y0
y0
y0
,
,
,
,
r0
r0
r0
r0
,
,
,
,
x1
x1
x1
x1
,
,
,
,
y1
y1
y1
y1
,
,
,
,
r1
r1
r1
r1
)
)
)
) 创建一个具有光感效果的球面渐变结构
,
高光照面
:
(
(
(
(
x0
x0
x0
x0
,
,
,
,
y0
y0
y0
y0
,
,
,
,
r0
r0
r0
r0
)
)
)
) ,
,
,
,
渐变基面
:
(
(
(
(
x1
x1
x1
x1
,
,
,
,
y1
y1
y1
y1
,
,
,
,
r1
r1
r1
r1
)
)
)
)
pattern
pattern
pattern
pattern
=
=
=
=
context
context
context
context
.
.
.
. createPattern
createPattern
createPattern
createPattern (
(
(
(
image
image
image
image
,
,
,
,
repetition
repetition
repetition
repetition
)
)
)
)
创建一个图案
:
image
image
image
image
为 Img
Img
Img
Img 类型元素 ,
repetition
repetition
repetition
repetition
为铺放样式 ;
pattern
pattern
pattern
pattern
可以应用于 fillStyle
fillStyle
fillStyle
fillStyle 及其它样式
状
态
context
context
context
context
.
.
.
. save
save
save
save ()
()
()
() 保存当前绘图上下文的内容到 Context
Context
Context
Context 图形栈
context
context
context
context
.
.
.
. restore
restore
restore
restore ()
()
()
() 将 Context
Context
Context
Context 的栈顶图形还原至当前绘图上下文
变
形
context
context
context
context
.
.
.
. scale
scale
scale
scale (
(
(
(
x
x
x
x
,
,
,
,
y
y
y
y
)
)
)
)
以 (
(
(
(
x
x
x
x
,
,
,
,
y
y
y
y
)
)
)
) 指定的比例缩放当前绘图上下文的坐标系
context
context
context
context
.
.
.
. rotate
rotate
rotate
rotate (
(
(
(
angle
angle
angle
angle
)
)
)
)
以当前绘图上下文坐标系元点为圆心将画布旋转 (
(
(
(
angle
angle
angle
angle
)
)
)
) 指定的弧度
context
context
context
context
.
.
.
. translate
translate
translate
translate (
(
(
(
x
x
x
x
,
,
,
,
y
y
y
y
)
)
)
) 以向量 (
(
(
(
x
x
x
x
,
,
,
,
y
y
y
y
)
)
)
) 进行平移变换
context
context
context
context
.
.
.
. transform
transform
transform
transform (
(
(
(
m11
m11
m11
m11
,
,
,
,
m12
m12
m12
m12
,
,
,
,
m21
m21
m21
m21
,
,
,
,
m22
m22
m22
m22
,
,
,
,
dx
dx
dx
dx
,
,
,
,
dy
dy
dy
dy
)
)
)
) 将当前的变形矩阵乘上矩阵
:{(m11,m21,dx),(m12,m22,dy),(0,0,1)}
context
context
context
context
.
.
.
. setTransform
setTransform
setTransform
setTransform (
(
(
(
m11
m11
m11
m11
,
,
,
,
m12
m12
m12
m12
,
,
,
,
m21
m21
m21
m21
,
,
,
,
m22
m22
m22
m22
,
,
,
,
dx
dx
dx
dx
,
,
,
,
dy
dy
dy
dy
)
)
)
)
设置当前变换矩阵为指定矩阵 :{(m11,m21,dx),(m12,m22,dy),(0,0,1)}
像
素
操
imagedata
imagedata
imagedata
imagedata
=
=
=
=
context
context
context
context
.
.
.
. createImageData
createImageData
createImageData
createImageData (
(
(
(
sw
sw
sw
sw
,
,
,
,
sh
sh
sh
sh
)
)
)
) 通过指定的尺寸创建一个图像
imagedata
imagedata
imagedata
imagedata
=
=
=
=
context
context
context
context
.
.
.
. createImageData
createImageData
createImageData
createImageData (
(
(
(
imagedata
imagedata
imagedata
imagedata
)
)
)
) 复制一个图像
imagedata
imagedata
imagedata
imagedata
=
=
=
=
context
context
context
context
.
.
.
. getImageData
getImageData
getImageData
getImageData (
(
(
(
sx
sx
sx
sx
,
,
,
,
sy
sy
sy
sy
,
,
,
,
sw
sw
sw
sw
,
,
,
,
sh
sh
sh
sh
)
)
)
) 将当前绘图上下文的图形中以
(
(
(
(
sx
sx
sx
sx
,
,
,
,
sy
sy
sy
sy
,
,
,
,
sw
sw
sw
sw
,
,
,
,
sh
sh
sh
sh
)
)
)
)
限定的范围中的图形取出并生成图像
午人
- 粉丝: 1
- 资源: 5
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
- SPC统计方法基础知识.pptx
- MW全能培训汽轮机调节保安系统PPT教学课件.pptx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论19