ylbtech-HTML-参考手册: 画布
1.返回顶部
1、

HTML5 <canvas> 参考手册


描述

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

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

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

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


浏览器支持

    

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 <canvas> 标签的属性及方法。

注意:Internet Explorer 8 及更早的IE版本不支持 <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()  
2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
6.返回顶部
 
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

HTML-参考手册: 画布的更多相关文章

  1. HTML 5 Canvas 参考手册

    HTML 5 Canvas 参考手册 HTML 视频/音频 HTML 文档类型 描述 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,&l ...

  2. AngularJS 参考手册

    AngularJS 参考手册 AngularJS 指令 本教程用到的 AngularJS 指令 : 指令 描述 ng-app 定义应用程序的根元素. ng-bind 绑定 HTML 元素到应用程序数据 ...

  3. MySQL 5.1 参考手册CHM (官方 简体中文版)

    点此下载: MySQL 5.1 参考手册CHM (官方 简体中文版) 在线文档:http://doc.mysql.cn/mysql5/refman-5.1-zh.html-chapter/

  4. Vue.js 2.0 参考手册.CHM下载

    下载地址 Vue.js 2.0 参考手册.CHM下载链接: http://pan.baidu.com/s/1kVbhd4b 密码: wxfh

  5. Gulp.js 参考手册,自动化构建利器

    Gulp 是最新的基于 Node 的自动化构建工具,希望能够取代 Grunt,成为最流行的 JavaScript 任务运行器.通过结合 NodeJS 的数据流的能力,只需几步就能搭建起自己的自动化项目 ...

  6. DOM参考手册及事件参考手册

    给全局HTML DOM元素增加函数的方法 HTMLElement.prototype.hasClass = function (className) { return new RegExp(" ...

  7. jQuery 参考手册 - 遍历

    jQuery 参考手册 - 遍历 jQuery Ajax jQuery 数据 jQuery 遍历函数 jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函数描述 .add()将元素添加到匹 ...

  8. JavaScript 参考手册——javascript本地和内置对象、BOM、DOM

    本部分提供完整的 JavaScript 参考手册: JavaScript 本地对象和内置对象 Browser 对象(BOM) HTML DOM 对象 JavaScript 对象参考手册 本参考手册描述 ...

  9. hive函数参考手册

    hive函数参考手册 原文见:https://cwiki.apache.org/confluence/display/Hive/LanguageManual+UDF 1.内置运算符1.1关系运算符 运 ...

随机推荐

  1. appium常见问题05_修改Android手机运行环境(adb指令修改hosts)

    自动化测试过程中,手机有时会跳网,怎样保持手机测试的环境稳定性,可以通过adb指令修改android手机hosts,保持手机运行在hosts中配置的环境中: 修改方法如下: 前提条件:已安装andro ...

  2. python 简易计算器

    import tkinter import tkinter.messagebox import math ''' 波波版计算器可实现的功能 1.能进行简单的加减惩处 2.能进行开根号操作 3.能进行后 ...

  3. 转 awk统计nginx每天访问最高的接口

    TODAY=date +%d/%b/%Y 获取当天时间awk -v val="$TODAY" ’ $4 ~ val {print $7}’ access.log 打印当天访问的接口 ...

  4. 为什么要使用MQ和到底什么时候要使用MQ

      一.缘起 一切脱离业务的架构设计与新技术引入都是耍流氓. 引入一个技术之前,首先应该解答的问题是,这个技术解决什么问题. 就像微服务分层架构之前,应该首先回答,为什么要引入微服务,微服务究竟解决什 ...

  5. python 大小写转换函数

    capitalize() 首字母大写,其余全部小写 upper() 全转换成大写 lower() 全转换成小写 title()  标题首字大写,如"i love python".t ...

  6. The Complete Javascript Number Reference 转载自:http://www.hunlock.com/blogs/The_Complete_Javascript_Number_Reference

    The Complete Javascript Number Reference Filed: Mon, Apr 30 2007 under Programming|| Tags: reference ...

  7. NOIP后一波总结

    我的山寨较为可靠分数为305(洛谷是真的水~显然不能用啊,果断换了一组合适的数据) 据大神们估计,得奖的分数在280, 我肯定是没有啥希望了.(我旁边的lxy同学从初二开始,每次以超分数线至少60分的 ...

  8. 2019-8-31-C#-使用汇编

    title author date CreateTime categories C# 使用汇编 lindexi 2019-08-31 16:55:58 +0800 2019-2-16 8:56:5 + ...

  9. Opencv3.3(Linux)编译安装至python的坑

    编译安装OpenCV绝对是一件让人发狂的事情,CMake繁多的选项,国内蛋疼的网速,实在让人无力吐槽,然而为了使用contrib包,我不得不重新编译他. OpenCV的编译 其实OpenCV编译并不是 ...

  10. java命令-jstack

    jstack用于生产java虚拟机当前时刻的线程快照.线程快照是当前java虚拟机内每一条线程正在执行的方法 堆栈的集合,生成线程快照的主要目的是定位线程出现长时间停顿的原因,比如线程间死锁.死循环. ...