HTML5 canvas 详细
HTML5画布描述
HTML5 <canvas>标签用于通过脚本(通常是JavaScript)动态绘制图形。 但是,<canvas>元素没有自己的绘图功能(它只是图形的容器), 您必须使用脚本来实际绘制图形。 getContext()方法返回一个对象,该对象提供在画布上绘制的方法和属性。此参考将介绍getContext("2d")对象的属性和方法,可用于在画布上绘制文本,线条,方框,圆圈等。
浏览器支持
下表是各主流浏览器对<canvas>元素的支持情况:
颜色样式和阴影
下表是画布颜色样式和阴影相关的属性 :
属性 | 描述 |
---|---|
fillStyle | 设置或返回用于填充绘图的颜色、渐变或图案 |
strokeStyle | 设置或返回用于笔画的颜色、渐变或图案 |
shadowColor | 设置或返回用于阴影的颜色 |
shadowBlur | 设置或返回阴影的模糊级别 |
shadowOffsetX | 设置或返回阴影与形状的水平距离 |
shadowOffsetY | 设置或返回阴影与形状的垂直距离 |
下表是画布颜色样式和阴影相关的方法 :
方法 | 描述 |
---|---|
createLinearGradient() | 创建一个线性渐变(用于画布内容) |
createPattern() | 按指定的方向重复指定的元素 |
createRadialGradient() | 创建一个径向/圆形渐变(用于画布内容) |
addColorStop() | 指定渐变对象中的颜色和停止位置 |
线条样式
下表是线条相关的属性 :
属性 | 描述 |
---|---|
lineCap | 设置或返回一行的结束大写字母的样式 |
lineJoin | 设置或返回创建的角的类型,当两行相交时 |
lineWidth | 设置或返回当前行宽度 |
miterLimit | 设置或返回最大斜接长度 |
矩形
下表是矩形相关的方法 :
方法 | 描述 |
---|---|
rect() | 创建一个矩形 |
fillRect() | 绘制一个“填充”矩形 |
strokeRect() | 绘制矩形(无填充) |
clearRect() | 清除给定矩形内的指定像素 |
画布路径
下表是画布路径相关的方法 :
方法 | 描述 |
---|---|
fill() | 填充当前绘图(路径) |
stroke() | 画出你定义的路径 |
beginPath() | 开始一个路径,或重置当前路径 |
moveTo() | 将路径移动到画布中的指定点,而不创建一条线 |
closePath() | 创建从当前点到起点的路径 |
lineTo() | 从画布中最后指定的点添加一个新点并在该点上创建一条线 |
clip() | 从原始画布上剪辑任何形状和大小的区域 |
quadraticCurveTo() | 创建一个二次贝塞尔曲线 |
bezierCurveTo() | 创建一个立方贝塞尔曲线 |
arc() | 创建圆弧/曲线(用于创建圆或圆的一部分) |
arcTo() | 在两个切线之间创建一个弧/曲线 |
isPointInPath() | 如果指定点在当前路径中,则返回true,否则为false |
画布转换
下表是转换相关的方法 :
方法 | 描述 |
---|---|
scale() | 按比例缩放当前绘制的图形或大或小 |
rotate() | 旋转当前绘图 |
translate() | 在画布上从(0,0)位置重新绘制 |
transform() | 替换当前绘图的变换矩阵 |
setTransform() | 将当前变换重置为单位矩阵。然后运行transform() |
画布文本
下表是画布文本相关的属性 :
属性 | 描述 |
---|---|
font | 设置或返回文本内容的当前字体属性 |
textAlign | 设置或返回文本内容的当前对齐方式 |
textBaseline | 设置或返回绘制文本时使用的当前文本基线 |
下表是画布文本相关的方法 :
方法 | 描述 |
---|---|
fillText() | 在画布上绘制“填充”文本 |
strokeText() | 在画布上绘制文本(无填充) |
measureText() | 返回一个包含指定文本宽度的对象 |
图像绘制
下表是画布图像绘制相关的方法 :
方法 | 描述 |
---|---|
drawImage() | 在画布上绘制图像、画布或视频 |
像素操作
下表是画布像素操作相关的属性 :
属性 | 描述 |
---|---|
width | 返回ImageData对象的宽度 |
height | 返回ImageData对象的高度 |
data | 返回包含指定ImageData对象的图像数据的对象 |
下表是画布像素操作相关的方法 :
属性 | 方法 |
---|---|
createImageData() | 创建一个新的空白ImageData对象 |
getImageData() | 返回一个ImageData对象,该对象复制画布上指定矩形的像素数据 |
putImageData() | 将图像数据(来自指定的ImageData对象)放回画布 |
画布合成
下表是画布合成相关的属性 :
属性 | 描述 |
---|---|
globalAlpha | 设置或返回绘图的当前alpha或透明度值 |
globalCompositeOperation | 设置或返回如何将新映像绘制到现有映像上 |
其他
下表是画布其他一些方法 :
方法 | 描述 |
---|---|
save() | 保存当前上下文的状 |
restore() | 返回先前保存的路径状态和属 |
createEvent() | 创建一个事件 |
getContext() | 获取画布上的内容 |
toDataURL() |
HTML5 canvas 详细相关推荐
- 【物联网智能网关-14】Html5:Canvas+WebSocket实现远程实时通信(下)
在上篇博文<Html5:Canvas+WebSocket实现远程实时通信(上)>中已经介绍了当前实现动态网页的一些基本技术,也说明了在.NET micro framework平台下实现We ...
- 基于HTML5 Canvas 实现弹出框
2019独角兽企业重金招聘Python工程师标准>>> 用户鼠标移入时,有弹出框出现,这样的需求很常见.这在处理HTML元素实现时简单,但是如果是对HTML5 Canvas 构成的图 ...
- html进度条圆圈渐变色,HTML5 canvas带渐变色的圆形进度条动画
jquery-circle-progress是一款带渐变色的圆形进度条动画特效jQuery插件.该圆形进度条使用的是HTML5 canvas来绘制圆形进度条及其动画效果,进度条使用渐变色来填充,效果非 ...
- HTML5 canvas 在线画笔绘图工具(三)
组装画板(TDrawBuilder) 在这一小节中我们要把工具条和画板组装起来,让他们可以协同进行工作. 画板通过一个命名为TDrawBuilder来进行组装.在详细讲解TDrawBuilder对象之 ...
- html绘制圆形和弧形的代码,通过HTML5 Canvas API绘制弧线和圆形的教程
在html5中,CanvasRenderingContext2D对象也提供了专门用于绘制圆形或弧线的方法,请参考以下属性和方法介绍: JavaScript Code复制内容到剪贴板 arc(x, y, ...
- html实现照片添加功能,HTML5 Canvas调用手机拍照功能实现图片上传功能(图文详解上篇)...
这篇文章主要为大家详细介绍了HTML5 Canvas,和jquery技术,调用手机拍照功能实现图片上传,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 因为最近一段时间,一直在弄微信项目,其中涉及到 ...
- 用html5做一条线,使用HTML5 canvas绘制线条的方法
使用HTML5 canvas绘制线条的方法 发布时间:2020-08-29 11:24:23 来源:亿速云 阅读:96 作者:小新 这篇文章主要介绍了使用HTML5 canvas绘制线条的方法,具有一 ...
- 使用sikuli和Arquillian测试HTML5 canvas应用程序
HTML5引入了一个很棒的新元素,可以用来在窗格上绘制任意内容: canvas元素. 数十年来,胖客户端应用程序的标准功能现已引入Web应用程序领域. Web开发人员不再需要使用专有插件在其应用程序中 ...
- HTML5 Canvas游戏开发实战 PDF扫描版
HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧,在介绍HTML5 Canvas相关特性的同时,还通过游戏开发实例深入剖析了其内在原理,让读 ...
最新文章
- 【BZOJ】4430: [Nwerc2015]Guessing Camels赌骆驼
- Smali文件添加try/catch语句,出现“invalid use of move-exception”异常
- 创建electron应用
- wxpython实现鼠标拖动事件
- 转:如何提高自己的归纳总结能力?
- 织梦需要php什么版本,DedeCmsV5.1FreeSP1正式版发布
- wingIDE右侧文件列表移动到左侧
- java netty聊天室_netty实现消息中心(二)基于netty搭建一个聊天室
- 同时在一个WebService服务中发布多个普通Java类
- SpringBoot使用RequestBodyAdvice进行统一参数处理
- ESX Server硬件升级步骤
- 世纪互联蓝云柯文达:与更多海外云服务商共赢中国市场
- 07 js自定义函数
- 服务端技术进阶(三)从架构到监控报警,支付系统的设计如何步步为营
- 盘点 GitHub 年度盛会|附视频
- Nofollow标签的写法以及nofollow使用介绍
- pythonfor反向循环_python如何实现反向迭代
- python写完后打不开门_感觉自己python已经入门了,为什么还是没法用Python写好程序?...
- 超链接标签 a (锚点链接)
- 政务服务一网通办云平台及智慧政务大数据资源中心建设方案
热门文章
- 【CAD二次开发】CAD选择集的问题集合
- (读书笔记)演说:用幻灯片说服全世界
- [Java] 用java来突破一下人类极限
- 在线溶氧仪 连接计算机,污水在线溶氧仪
- 实在受不了Ogre的Maya导出插件,所以重写了一下。
- 让手机穿上防水纳米外衣
- 进阶篇|手游联运系统营收的途径有哪些?手游联运系统营收秘诀?
- matlab程序subplot,MATLAB之中秋subplot函数
- 音频在线转文字的方法
- 西门子200smart与台达MS300变频器和欧姆龙E5CC温控器通讯程序 触摸屏与plc以太网通讯,PLC本体com口与变频器通讯485口相连,扩展模块SB CM01与欧姆龙温控器485通讯