• 手机版

    扫码体验手机版

  • 微信公众号

    扫码关注公众号

游客您好
第三方账号登陆
  • 点击联系客服

    在线时间:8:00-16:00

    客服QQ

    2938366614

    电子邮件

    pcs2938366614@163.com
  • Y智能分享

    随时随地学习编程

  • 扫描二维码

    关注微信公众号

讲师介绍
超级管理员
Y智分享官方账号
  • 老兵专属

    老用户专属勋章
  • 原创达人

    原创帖子超过30个
  • 邀请大使

    邀请人数超过10人
学员动态
暂无任何学员

HTML 画布

[复制链接]
admin官方认证 永久VIP 发布认证 发表于 2020-8-3 13:34:43 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
HTML5 <canvas> 参考手册) X$ C# @! d, q2 H  M
描述
& N8 |: Y% ?6 k7 L+ s; m, q7 PHTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript)。  }8 |7 I9 j. _# ~3 B, ]( t" V! N
不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务。
9 |* ^+ [3 ~4 A3 j4 I% f. [+ i# ~getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。; V. V; M) z/ T0 T! _& {6 K
本手册提供完整的 getContext("2d") 对象的属性和方法,可用于在画布上绘制文本、线条、矩形、圆形等等。# t/ h  t$ k9 ]9 W7 r9 Q$ [
6 f4 n1 ^5 f' }" C! ]& p
浏览器支持
" ~. ^6 R3 b* x8 Z. kInternet Explorer Firefox Opera Google Chrome Safari
% o7 V- N' n+ ~9 e0 _/ XInternet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 <canvas> 标签的属性及方法。
4 R4 Y- U% b$ F. b1 ?8 x注意:Internet Explorer 8 及更早的IE版本不支持 <canvas> 元素。
; V: t5 z: g" x1 K7 _: c/ M: N/ N2 P' S5 a' P

% q1 }6 p6 S0 \' A颜色、样式和阴影
9 j+ s& W; _/ H. ?1 J7 D
属性 描述
fillStyle 设置或返回用于填充绘画的颜色、渐变或模式。
strokeStyle 设置或返回用于笔触的颜色、渐变或模式。
shadowColor 设置或返回用于阴影的颜色。
shadowBlur 设置或返回用于阴影的模糊级别。
shadowOffsetX 设置或返回阴影与形状的水平距离。
shadowOffsetY 设置或返回阴影与形状的垂直距离。

1 p( e. A; h, x2 @2 Z
方法 描述
createLinearGradient() 创建线性渐变(用在画布内容上)。
createPattern() 在指定的方向上重复指定的元素。
createRadialGradient() 创建放射状/环形的渐变(用在画布内容上)。
addColorStop()$ s& f- Q5 I! J1 @1 f5 {7 B; S
规定渐变对象中的颜色和停止位置。

/ U) X% e5 [6 J. ?% ]( @
6 W8 d; P7 j& E9 z( ?' B( V! v; U2 M线条样式& v6 |6 i1 a2 c. }& K  P2 R0 ?
属性 描述
lineCap 设置或返回线条的结束端点样式。
lineJoin 设置或返回两条线相交时,所创建的拐角类型。
lineWidth 设置或返回当前的线条宽度。
miterLimit 设置或返回最大斜接长度。

5 I. J4 u" Q6 ^$ c$ B6 Q9 D' `4 n矩形1 j5 `& d$ F1 q2 o3 l+ g# S
方法描述
rect() 创建矩形。
fillRect() 绘制"被填充"的矩形。
strokeRect() 绘制矩形(无填充)。
clearRect() 在给定的矩形内清除指定的像素。
/ {7 y1 `, U! l: }" K) f
路径8 x9 J  g5 d6 T3 Y5 M9 X
方法 描述
fill() 填充当前绘图(路径)。
stroke() 绘制已定义的路径。
beginPath() 起始一条路径,或重置当前路径。
moveTo() 把路径移动到画布中的指定点,不创建线条。
closePath() 创建从当前点回到起始点的路径。
lineTo() 添加一个新点然后在画布中创建从该点到最后指定点的线条。
clip() 从原始画布剪切任意形状和尺寸的区域。
quadraticCurveTo() 创建二次贝塞尔曲线。
bezierCurveTo() 创建三次贝塞尔曲线。
arc()         创建弧/曲线(用于创建圆形或部分圆)。
arcTo() 创建两切线之间的弧/曲线。
isPointInPath() 如果指定的点位于当前路径中,则返回 true,否则返回 false。

* e- f7 M; n7 k- e
# [  r% }! [9 _转换
; ?) Z0 x, q$ M
方法 描述
scale() 缩放当前绘图至更大或更小。
rotate() 旋转当前绘图。
translate() 重新映射画布上的 (0,0) 位置。
transform() 替换绘图的当前转换矩阵。
setTransform() 将当前转换重置为单位矩阵。然后运行 transform()。
- _7 S2 p! `- m6 x4 p
文本
$ ~$ t; h4 a% [( V3 @
属性 描述
font 设置或返回文本内容的当前字体属性。
textAlign 设置或返回文本内容的当前对齐方式。
textBaseline 设置或返回在绘制文本时使用的当前文本基线。

; Q1 k0 B) |9 {8 j& y; W0 S/ ]* s
方法 描述
fillText() 在画布上绘制"被填充的"文本。
strokeText() 在画布上绘制文本(无填充)。
measureText() 返回包含指定文本宽度的对象。

: D0 T# V& M/ a0 t图像绘制
1 Z6 X1 p4 I, V* \2 t. Q5 \7 @) a3 d
方法 描述
drawImage() 向画布上绘制图像、画布或视频。

" R% T' k6 {  ]2 X7 h4 b像素操作& K% G. s. E1 b- \
属性 描述
width 返回 ImageData 对象的宽度。
height 返回 ImageData 对象的高度。
data 返回一个对象,其包含指定的 ImageData 对象的图像数据。
0 O' i# R% |8 J- t% b+ U
方法 描述
createImageData() 创建新的、空白的 ImageData 对象。
getImageData() 返回 ImageData 对象,该对象为画布上指定的矩形复制像素数据。
putImageData() 把图像数据(从指定的 ImageData 对象)放回画布上。

$ t8 R9 v) T2 v; w合成
' M' e7 P4 b* g' {" ?) Y  B# T; i
属性 描述
globalAlpha 设置或返回绘图的当前 alpha 或透明值。
globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上。
* x0 C5 ~1 j: g8 R/ I
其他
9 Z" Y8 A, [& ]& X/ A% b( k
方法 描述
save() 保存当前环境的状态。
restore() 返回之前保存过的路径状态和属性。
createEvent()
getContext()
toDataURL()

# p& `% T# M! c" J# W- W

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
客服QQ:2938366614

精彩评论34

YEYILING 发表于 2020-8-14 13:19:59 | 显示全部楼层
非常好,顶一下; E% y/ V: i# @/ Y$ a3 R4 ^7 d
该用户还没有理想!
心灵捕手 发表于 2020-8-14 13:19:59 | 显示全部楼层
边撸边过
$ x9 C' u% W% U
该用户还没有理想!
一剑105 发表于 2020-8-14 13:19:59 | 显示全部楼层
顶起出售广告位
# |" W  Q* }# ?& S$ D
该用户还没有理想!
杀鸡 发表于 2020-8-14 13:19:59 | 显示全部楼层
非常好,顶一下
5 c+ X! j! e8 j0 N& F' P
该用户还没有理想!
hccz 发表于 2020-8-14 13:20:02 | 显示全部楼层
是爷们的娘们的都帮顶!大力支持4 C2 H% `  n5 \# ]) M
该用户还没有理想!
游龙子摄狼 发表于 2020-8-14 13:20:02 | 显示全部楼层
不错 支持下9 {$ i* B  M0 j7 \' x4 M
该用户还没有理想!
今天星期六 发表于 2020-8-14 13:20:02 | 显示全部楼层
看帖要回,回帖才健康,在踩踩,楼主辛苦了!
3 t7 g1 `$ Q0 I, ]( |
该用户还没有理想!
/No.ポ 发表于 2020-8-14 13:20:04 | 显示全部楼层
支持,楼下的跟上哈~
5 j$ }& m  p, v+ d8 q% k8 g
该用户还没有理想!
心灵捕手 发表于 2020-8-14 13:20:05 | 显示全部楼层
沙发???* j8 O2 {' Q/ A
该用户还没有理想!
懒得打字嘛,点击右侧快捷回复 【Y智能分享专属】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发现新世界,Y智能分享! 立即登录 立即注册
关于我们
  • 关注官方微信

  • QQ在线客服

    在线联系
  • Y智能分享
  • 山东省菏泽市
Copyright PCS ©2019- PCSZNY.CN Inc.Y智能分享