canvas的方法 p/ L! @) u) B1 g9 q7 v/ R
save()保存当前环境的状态
b2 s2 E+ ^+ t% c$ ~; B! wrestore() 返回之前保存过的路径状态和属性% ] u2 f4 Z! o
createevent()
. t9 w; y/ q {7 c3 n) Tgetcontext()返回一个对象,指出访问绘图功能必要的api& y0 i( E3 L9 r5 Q
todataupl() 返回canvas图像的url
8 S) R/ f, C/ {: h! N线条样式的属性和方法+ U$ s! m/ P( _. R; ?
属性:: _( k' r. J4 o/ b- P- N& L
linecap设置或返回线条的结束端点样式: h* s4 s0 w$ s* z0 Z% K6 a
linejoin设置或返回两条线相交时,所创建的拐角类型% B8 `7 i* P0 P' P: Y/ y+ ?1 j4 W
linewidth设置或返回当前线条的宽度." h& T0 H- @6 V' X3 N
miterlimit设置或返回最大斜接长度9 h* X# _# ^$ C
颜色,样式和阴影属性和方法
, F9 W; p4 X2 R属性
; q+ d$ r0 S5 S1 ^$ Qfillstyle设置或返回用于填充绘画的颜色,渐变或模式* w- {" ~7 P) i9 x
strokestyle设置或返回用于笔触的颜色,渐变或模式
! ?9 S3 }* b! C7 @3 Yshadowcolor设置或返回用于阴影的颜色' b3 b) g# U$ i$ y8 ~# @: G3 O
shadowblur设置或返回用于阴影的模糊级别
, @) ?; j6 f8 yshadowoffsetx设置或返回阴影距形状的水平距离5 V& {3 [8 B: {& k: |' c
shadowoffsety设置或返回阴影距形状的垂直距离7 n1 k- A) n( E$ E
方法: i) D3 t: T8 U& `0 N- j2 e
createlineargradient()创建线性渐变(用在画布内容上)
) _: F& A3 ^' ^+ m J" kcreatepattern()在指定的方向上重复指定的元素! M. H8 L$ i: ? b! w* t g$ k
createradialgradient()创建放射状/环形的渐变(用在画布内容上)
D, T& E0 q# U2 g) q3 G/ R1 n: Oaddcolorstop()规定渐变对象中的颜色或停止位置
3 _+ L7 P0 O' W% M+ L路径方法) ?2 N( ]( e- A. f: S7 h0 P
fill()填充当前绘图(路径)" h( e7 Y0 m5 j! i: O) F4 z& _/ H
stroke()绘制已定义的路径* ^) n6 @ r8 `# _9 j' f3 H# L
beginpath()起始一条路径,或重置当前路径- V; S. i, B0 o( @1 ^7 B2 [" ^! {1 P
moveto()把路径移动到画布中的指定点,不创建线条
8 g% Y. q1 c8 q4 f$ [closepath()创建从当前点回到起始点的路径4 k/ k8 O4 w2 j4 y/ T$ y
lineto()添加一个新点,创建从该点到最后指定点的线条
. O5 p, D7 e; t d4 P. s4 }% g5 tclip()从原始画布剪切任意形状和尺寸的区域
6 P# C! \# W, Y4 u8 J' fquadraticcurveto()创建第二次贝塞尔曲线% G Q5 e s: v) ]
beziercureto()创建上次方贝塞尔曲线2 A9 W- P: Z. ]2 v1 R+ y
arc()创建弧/曲线(用于创建圆形或部分圆)/ ]9 _' u E+ l6 l# P) @; i" Q
arcto()创建两切线之间的弧/曲线' {3 `1 F3 [0 Z7 j% J
ispointinpath()如果指定的点位于当前路径中,返回布尔值
; T0 U1 S Z% S$ W: f3 ?7 g/ E' w矩形* J6 N: | p! V) r
rect()创建矩形
" ?' I( }" _6 \8 gfillrect()绘制”被填充”的矩形
2 ]; U4 v! H! gstrokerect()绘制矩形(无填充)
' i! d! p3 U; _# mclearrect()在给定的矩形内清除指定的像素
$ f8 n3 v6 g/ G! B! O设置文本属性和方法
) a$ o3 e2 \0 f3 Y% L/ J属性:
& T+ b6 U! o Bfont 设置或返回文本内容的当前字体属性
, C6 O- p6 ~) t! X+ C+ ~: R9 Z0 atextalign设置或返回文本内容的当前对齐方式( _6 F' b# M1 o% J+ Z
textbaseline 设置会返回在绘制文本时使用的当前文本基线.4 j# [1 K6 z! n x
方法:
- o) G7 s/ j% J% k- {filltext()在画布上绘制”被填充的”文本
; H/ ^+ ` a# j0 ~stroketext()在画布上绘制文本(无填充)
; F) ]4 t# ^, q: `( ?measuretext()返回包含指定文本宽度的对象& T! v' D& o5 R. @
转换方法$ o3 t' Z4 w, i3 e( K
scale() 缩放当前绘图至更大或更小1 J+ ~- {7 C& B, `8 F# E
rotate() 旋转当前绘图, h" \- ]9 |7 F
translate()重新映射花布衫的(0,0)位置/ W4 n/ A* y& R
transform()替换绘图的当前转换矩阵2 a* I( H! @4 O) J3 |, z
settransform()将当前转换重置为单位矩阵.然后运行transform()
" n4 W# |- [/ R& z6 y9 o; O
7 _' M0 ~4 f4 L6 k/ a* p s更多网页制作信息请查看： 网页制作 |
|
外卖新店开业第一周开推广，十家九家亏0打酱油
Ai优选商家寻找本地地推合作伙伴1717求项目与合作
拥抱AI搜索新时代！GEO优化成为企业流量增1616网络资讯
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
