HTML 5 Canvas 绘制图形图像
目录
HTML5 Canvas
创建一个画布(Canvas)
JavaScript 绘制图像
颜色、样式和阴影
线条样式,矩形
路 径
转 换,文本
图像绘制,像素操作
合成,其 他
HTML5 Canvas
HTML5 <canvas> 标签定义图形,比如图表和其他图像,必须使用脚本来绘制图形。<canvas> 是 HTML 5 中的新标签。
<canvas> 元素本身并没有绘制能力,它仅仅是图形的容器/画布,必须使用脚本(JavaScript)来完成实际的绘图任务。
getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。 getContext("2d") 对象属性和方法,可用于在画布上绘制文本、线条、矩形、圆形等二维图像。
表格中的数字表示支持 <canvas> 元素的第一个浏览器版本号:
元素 | Chrome | IE | Firefox | Safari | opera |
---|---|---|---|---|---|
<canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
<cavas> 元素属于行内元素。
创建一个画布(Canvas)
一个画布容器 <canvas> 在网页中是一个矩形框, 默认情况下 <canvas> 元素没有边框和内容。
注意:canvas 的 width 与 height 属性的值不能带单位,如 100px、100% 都是错误的,只能是纯数字。
<canvas>简单实例如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title>Cavas 演示</title>
</head>
<body>
<canvas id="myCanvas1" width="200" height="100" style="border:1px solid #000000;">浏览器不支持 HTML5 canvas
</canvas>
<canvas id="myCanvas2" width="200" height="100" style="border:1px solid #f00;">浏览器不支持 HTML5 canvas
</canvas>
</body>
</html>
<cavas> 标签通常需要指定一个 id 属性 (因为脚本中经常引用), width 和 height 属性定义的画布的大小,可以在 HTML 页面中使用多个 <canvas> 元素。
JavaScript 绘制图像
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title>Cavas 演示</title><!-- JQuery CDN--><script src="http://code.jquery.com/jquery-2.1.1.min.js"></script><script type="text/javascript">$(function () {/**获取 cavas Dom 对象*/var canvasObj = document.getElementById("myCanvas");/**获取 context 对象,该对象提供了用于在画布上绘图的方法和属性* 2d 是目前支持的二维图像*/var ctx = canvasObj.getContext("2d");/**绘制一个红色的矩形*/ctx.fillStyle = "#FF0000";ctx.fillRect(0, 0, 150, 75);});</script>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">浏览器不支持 HTML5 canvas
</canvas>
</body>
</html>
设置 fillStyle 属性可以是 CSS 颜色,渐变,或图案,fillStyle 默认设置是#000000(黑色),后面会详细讲解。
fillRect(x,y,width,height) 方法绘制“被填充”的矩形,后面会详细讲解。
Canvas 坐标
canvas 是一个二维网格,canvas 的左上角坐标为 (0,0),如上fillRect (0,0,150,75) 意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。
颜色、样式和阴影
属性 | 描述 |
---|---|
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() |
HTML 5 Canvas 绘制图形图像相关推荐
- Canvas绘制图形图像
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8" ...
- 使用H5新增的canvas绘制图形
一.绘制文本 <!DOCTYPE html> <html lang="zh-cn"><head><meta charset="U ...
- - Canvas 简介- 使用 Canvas 绘制图形- Canvas 常用方法- SVG 简介- 使用 SVG 绘制基本图形
1 Canvas 简介 Canvas 表示画布,现实生活中的画布是用来作画的. HTML5 中的 Canvas :我们可以称它为"网页中的画布".默认情况下,Canvas 是一块 ...
- html5 canvas绘制图形,html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- 【canvas绘制图形】
canvas绘制图形 一.绘制圆形 二.绘制三角形 三. 绘制矩形 一.绘制圆形 <!DOCTYPE html> <html lang="en"> < ...
- android 自定义多边形,Android:自定义view之Canvas绘制图形
前面讲解了onMeasure,接下来讲解onDraw,onDraw主要就是绘制,也就是我们真正关心的部分,使用的是Canvas绘图. @Override protected void onDraw(C ...
- canvas绘制图形
第一步:html5页面中添加canvas元素 <canvas id="myCanvas" width="300" height="300&quo ...
- HTML5利用Canvas绘制图形(Canvas基本知识、绘制矩形、使用路径和图形组合)
绘制图形有很多方法,可以借助Flash实现,也可以使用SVG和VML来绘图.本次将要学习一种新的灰土方法--使用Canvas元素,它是基于HTML5原生的绘图功能.使用Canvas元素,可以绘制图形, ...
- 微信小程序开发—(八)canvas绘制图形
一.小知识 (1).API接口 (2).context 对象的方法列表 二.步骤 wxml中: <canvas canvas-id="myCanvas" class=&quo ...
- canvas绘制图形API(一)
canvas元素的基础知识 canvas元素是HTML5中的一个新增的重要元素,专门用来绘制图形.在页面上放置一个canvas元素,就相当于在页面上放置了一块"画布",可以在其中进 ...
最新文章
- 一、网页端文件流的传输
- 使用 Node.js、Express、AngularJS 和 MongoDB 构建一个Web程序
- 《编程珠玑(第2版•修订版)》—第2章2.5节原理
- markdown 语法_Markdown 基本语法
- keras + tensorflow —— 文本处理
- Flutter学习 — 添加Material触摸水波效果
- ad系统安装配置指南(java-jndi-ldap),AD系统安装配置指南(JAVA-JNDI-LDAP-Exchange)
- 利用工具,促进有效沟通
- 计算机专业毕业设计题目大全(各种类型系统设计想法汇总)
- ROS World 2020所有视频发布
- 移动终端安全模块技术研究
- Windows Update 无法启用 拒绝访问
- 解决阿里云无法正常使用samba的问题
- Xpath简介及用法整理
- 不能bostype没有元数据异常_金蝶EAS_BOS工作笔记
- 工业智能网关BL110详解之九十: 实现西门子S7-1200 PLC接入金鸽modbus云平台
- 东南计算机国际学院,拼搏·东南 | 东南大学第四届超级计算机竞赛暨ASC20-21世界大学生超级计算机竞赛东南大学预赛...
- linux free函数头文件,Linux_Linux下malloc/free与new/delete的区别,由于malloc/free是库函数,不是 - phpStudy...
- html页面长截图或生成pdf
- 1.我所了解的内网渗透
热门文章
- 如何在Web App Project 或者 Web Site Project的App_Code 内使用 Profile/ProfileCommon
- 拓端tecdat|R语言用回归构建配对交易(Pairs Trading)策略量化模型分析股票收益和价格
- 拓端tecdat|python贝叶斯随机过程:马尔可夫链Markov-Chain,MC和Metropolis-Hastings,MH采样算法可视化
- 路由器与交换机怎么插线_网络设备:中继器、集线器、网桥、交换机、路由器、网关的超全总结!...
- 软件工程 第一章 软件工程的基本概念
- 华为8817升级Android5,华为c8817E官方升级包大集合
- ubuntupython损坏_Ubuntu上修复Python
- abb机器人gsd文件_ABB机器人控制器死机故障维修
- windows下安装Keras(CPU版)
- 深度学习常见的基本概念整理