H5新特性Canvas绘图技 术 的使用学习
Canvas： 画布 ，是H5提供的2D绘图技术。
您的浏览器不支持Canvas标签!
CANVAS标签在浏览器中默认是300*150的inline-block。画布的 宽 和高只能使用 HTML /JS属性来赋值，不能使用 CSS 样式赋值!
每个画布上有且只有一个[ 画笔 ]对象——称为[绘图上下文]对象——使用该对象进行绘图!
VAR ctx = canvas.getContext(‘2d’) //得到画布上的画笔对象
(1)使用Canvas 绘制 矩形
矩形的定位点在自己的左上角
ctx.lineWidth = 1 描边宽度
ctx.fillStyle = ‘ # 000’ 填充样式/颜色
ctx. stroke Style = ‘#000’ 描边样式/颜色
ctx.fillRect( x, y, w, h ) 填充一个矩形
ctx.strokeRect( x, y, w, h ) 描边一个矩形
ctx.clearRect( x, y, w, h ) 清除一个矩形范围内所有的绘图
练习：
在画布的左上角填充一个100*80的矩形
在画布的右上角填充一个100*80的矩形
在画布的左下角描边一个100*80的矩形
在画布的 右下角 描边一个100*80的矩形
在画布的正中央描边一个100*80的矩形
在画布上描边一个可以左右移动的100*80的矩形
提示：使用定时器，先清除画布上的已有内容，再重新绘制一个(X不停的增加)
在画布上描边一个可以上下移动的100*80的矩形(Y不停的增加)
在画布上描边一个可以斜向右下45度角移动的100*80的矩形(X/Y不停的增加)
在画布上描边一个可以斜向右下30度角移动的100*80的矩形(X/Y不停的增加)
(2)使用Canvas绘制文本
一段文字的定位点在其文本基线的起点
ctx.textBaseline = ‘alphabetic’ 文本基线
ctx.font = ‘12px sans -s erif’ 文本大小和字体
ctx.fillText( str, x, y ) 填充一段文本
ctx.strokeText( str, x, y ) 描边一段文本
ctx.measureText( str ) 基于当前 文字大小 字体设置测量文本，返回一个对象：{width: x}
练习：
在画布左上角描边一段黑色文本：达内 科技 2017?
在画布右上角描边一段蓝色文本：达内科技2017?
在画布左下角填充一段黑色文本：达内科技2017?
在画布右下角填充一段蓝色文本：达内科技2017?
在画布正中央填充一段蓝色文本：达内科技2017?
在画布左上角描边一段黑色文本：达内科技2017?，左右移动
6.Canvas绘图中使用渐变对象
线性渐变： line arg ra die nt
径向渐变： radialGradient
可以参考PS中的渐变效果。
var g = ctx.createLinearGradient( x1, y1, x2, y2 );
g.addColorStop( offset, color )
&helli p; .
g.addColorStop( offset, color )
ctx.strokeStyle = g;
ctx.fillStyle = g;
课后练习：
创建Node.js 服务器 ，可以接收客户端的如下请求：
静态资 源 请求：
/p ub lic/salesdata.ht ML 向客户端输出一个只有空白画布的页面，加载完成后异步请求动态数据
/public/ jq uery-1.11.3.js
动态资源请求：
GET /salesdata 向客户端返回如下的JSON数据：
[
{[label]: [ 部门 1], [value]:300},
{[label]: [部门2], [value]:500},
{[label]: [部门3], [value]:150},
{[label]: [部门4], [value]:400},
{[label]: [部门5], [value]:550},
{[label]: [部门6], [value]:250}
]
客户端根据这些数据，绘制出如下图所示的 统计图 ：
提示：为 简化 起见，可以把value值看做每个柱的高度。
1.Canvas的 尺寸 不能用CSS指定
使用CSS指定的Canvas尺寸，实际不是修改了画布尺寸，而是进行了拉伸，上面的绘图内容也会随着进行拉伸。
可以使用HTML标签的width和h ei ght属性，也可以使用JS对象的width和height属性。
2.使用Canvas进行绘图 —— 路径
Path：类似于PS中的[@R_ 126 _1727@]，由多个坐标点组成的任意形状，路径不可见，可用于[描边]、[填充]、[裁剪]。
ctx.be gin Path() 开始 一条新路径
ctx.closePath() 闭合当前路径
ctx.moveTo(x, y) 移动到指定点
ctx.l inet o(x, y) 从当前点到指定点画 直线
ctx.arc(cx, cy, r, start, end) 绘制 圆 拱路径
ctx.stroke() 对当前路径描边
ctx.fill() 对当前路径填充
ctx.clip() 使用当前路径进行裁剪
练习：使用路径描边绘制一个坐标轴
练习：使用圆拱绘制可以前进的 圆环 进度 条
提示：开始角度是-90，使用定时器,不停的修改结束角
练习：创建一个函数o PE nMouth()，在画布上绘制如下的图形
练习：创建一个函数clo SEM outh()，在画布上绘制如下的图形
练习：使用定时器，每隔1s中交替调 用O penMouth()和closeMouth()
3.使用Canvas进行绘图 —— 图像
Canvas属于客户端技术，图片在服务器中，所以浏览器必须先下载要绘制的图片，且等待图片 异步加载 完成：
var P3 = new Image();
p3.src = ‘ img /p3.png’; //浏览器会自动异步请求图片
console. LOG (p3.width); //0
p3.onload = function(){ //图片加载完成
console.log(p3.width); //200
//开始绘制图片到画布上….
ctx.drawImage( p3, x, y ); //原始大小绘图
ctx.drawImage( p3, x, y, w, h ); //拉伸绘图
}
练习：在画布的四个角落各画一个原始大小的飞机
练习：在画布的正中央画一个400*200大小的飞机
练习：在画布的左上角画一个飞机，左右移动
练习：在画布的正中央画一个飞机，可以随着鼠标的移动而移动
全局变量： var x , y
鼠标在画布上方移动： e.offsetX e.offsetY
定时器：不停的删除已有内容，重绘飞机
Canvas绘图核心知识点：—— 重点
绘制矩形：
ctx.fillRect() ctx.strokeRect() ctx.clearRect()
绘制文本：
ctx.fillText() ctx.strokeText() ctx.measureText().width
绘制路径：
ctx.beginPath() ctx.closePath()
ctx.moveTo() ctx.lineTo()
ctx.arc()
ctx.stroke() ctx.fill() ctx.clip()
绘制图像：
ctx.drawImage()
4.使用Canvas绘图时进行 变形 操作
CSS中有变形相关样式： transform: rotate/scale/translate/skew，这些变形只能作用于某个HTML元素。
Canvas绘图中也有变形技术，可以针对某一个图像/图形的绘制过程进行变形：rotate、scale、translate。
ctx.rotate( 弧度 ) 旋转绘图上下文对象(即画笔),轴点是画布的原点
ctx.translate( x, y ) 将整个画布的原点平移到指定的点
ctx.save() 保存画笔当前的所有变形状态值(游戏中从存盘)
ctx.re Store () 恢复画笔变形状态到最近的一次保存(游戏中读取存盘)
练习：在画布左上角画一个绕自己为中心旋转的飞机1;在同一个画布的右上角画一个不选旋转的飞机2;在同一个画布的左上角画一个旋转速度是飞机1速度2倍的飞机3
提示：每个小飞机[平移+旋转+绘制+逆向旋转+逆向平移]才不会影响后续飞机的绘制
5.第三方绘制统计图工具
(1)Chart.js：免费的，提供了八种 统计图表
(2) fusion Charts.js：收费的，提供了90+中统计图表
(3)ECharts： 百度 提供的免费的绘图工具，与地图整合的很好
(4)FreeCharts ….
提示：第三方工具使用无需记忆!重点掌握自学的过程：
(1)打开官网，查看说明
https://www.chartjs. org /
(2)仿照DEMO编写示例
开源免费的、8种图表、基于H5 Canvas、支持响应式
(3)在实际项目中加以应用，查看详细 API 说明
您的浏览器不支持Canvas绘图!
new Chart(c15, {
type: 'bar',//line、pie、noughnut .. .
data: {},
options: {}
});
练习：参考手册，使用Chart.js绘制彩色的柱状图，且Y轴从0开始。
位图(Photoshop)：由一个又一个像素点组成，每个点各有自己的颜色，色彩细腻，但放大会失真
矢量图(Illustrator)：由一个又一个线条组成，每个线条可以指定颜色、 方向 ，可以无限缩放，但 细节 不够丰富
6.HTML5新特性——SVG绘图
Scalable Vector Graph：可缩放的矢量图
Canvas绘图 SVG绘图
类型 2D位图 2D矢量图
如何绘图 使用JS代码绘图 使用标签绘图
事件绑定 每个图形不是元素，无法直接 绑定事件 每个图形都是元素，可以直接绑定事件监听
应用场合 统计图、游戏 统计图、图标、地图
SVG技术诞生于2000年， 早期 作为 XM L的扩展应用出现;H5标准把常用的SVG标签采纳为标准，但有些被废弃掉。
SVG技术在HTML5出现之前的使用方法：
(1)在一个 XML文档 中声明要绘制的图形
(2)再编写HTML文档，使用IMG/IFR am E应用XML文档即可
SVG技术在HTML5出现之后的使用方法：
直接创建HTML5文档，在其中书写SVG标签即可
本身是一个300*150的inline-block。
使用SVG标签绘制矩形：
使用SVG标签绘制圆形：
使用SVG标签绘制椭圆：
使用SVG标签绘制直线：
使用SVG标签绘制折线：
使用SVG标签绘制多边形：
课后 任务 ：
(1)编写一个带AUDIO标签的网页上传到自己的 新浪 云 服务器，用iOS 手机访问 试试。
(2)自学第三方绘图工具库：ECharts，绘制股票走势图
(3) 使用Canvas绘制一个随机 改变 的验证码图片
var str = ‘ abc DEFGHJKLMNPQRSTWXY3456789’;
var char = str[ 0~字符串长度间的随机数 ];
要求：
画布 背景颜色 随机(浅色) ctx.fillRect()
文字内容随机、大小随机，颜色随机(深色)、旋转角度随机。
5条随机干扰线(深色)，处于文字上方。
10 0个 杂色点( 半 径为1为圆)，处于文字上方。
4.仿网易云音乐的播放界面
点击播放按钮，碟片开始旋转，背景音乐开始播放;
再次点击播放按钮，碟片停止旋转，背景音乐停止播放。
H5新特性Canvas绘图技术的使用学习
Canvas：画布，是H5提供的2D绘图技术。
您的浏览器不支持Canvas标签!
CANVAS标签在浏览器中默认是300*150的inline-block。画布的宽和高只能使用HTML/JS属性来赋值，不能使用CSS样式赋值!
每个画布上有且只有一个[画笔]对象——称为[绘图上下文]对象——使用该对象进行绘图!
var ctx = canvas.getContext(‘2d’) //得到画布上的画笔对象
(1)使用Canvas绘制矩形
矩形的定位点在自己的左上角
ctx.lineWidth = 1 描边宽度
ctx.fillStyle = ‘#000’ 填充样式/颜色
ctx.strokeStyle = ‘#000’ 描边样式/颜色
ctx.fillRect( x, y, w, h ) 填充一个矩形
ctx.strokeRect( x, y, w, h ) 描边一个矩形
ctx.clearRect( x, y, w, h ) 清除一个矩形范围内所有的绘图
练习：
在画布的左上角填充一个100*80的矩形
在画布的右上角填充一个100*80的矩形
在画布的左下角描边一个100*80的矩形
在画布的右下角描边一个100*80的矩形
在画布的正中央描边一个100*80的矩形
在画布上描边一个可以左右移动的100*80的矩形
提示：使用定时器，先清除画布上的已有内容，再重新绘制一个(X不停的增加)
在画布上描边一个可以上下移动的100*80的矩形(Y不停的增加)
在画布上描边一个可以斜向右下45度角移动的100*80的矩形(X/Y不停的增加)
在画布上描边一个可以斜向右下30度角移动的100*80的矩形(X/Y不停的增加)
(2)使用Canvas绘制文本
一段文字的定位点在其文本基线的起点
ctx.textBaseline = ‘alphabetic’ 文本基线
ctx.font = ‘12px sans-serif’ 文本大小和字体
ctx.fillText( str, x, y ) 填充一段文本
ctx.strokeText( str, x, y ) 描边一段文本
ctx.measureText( str ) 基于当前文字大小字体设置测量文本，返回一个对象：{width: x}
练习：
在画布左上角描边一段黑色文本：达内科技2017?
在画布右上角描边一段蓝色文本：达内科技2017?
在画布左下角填充一段黑色文本：达内科技2017?
在画布右下角填充一段蓝色文本：达内科技2017?
在画布正中央填充一段蓝色文本：达内科技2017?
在画布左上角描边一段黑色文本：达内科技2017?，左右移动
6.Canvas绘图中使用渐变对象
线性渐变： linearGradient
径向渐变： radialGradient
可以参考PS中的渐变效果。
var g = ctx.createLinearGradient( x1, y1, x2, y2 );
g.addColorStop( offset, color )
….
g.addColorStop( offset, color )
ctx.strokeStyle = g;
ctx.fillStyle = g;
课后练习：
创建Node.js服务器，可以接收客户端的如下请求：
静态资源请求：
/public/salesdata.html 向客户端输出一个只有空白画布的页面，加载完成后异步请求动态数据
/public/jquery-1.11.3.js
动态资源请求：
GET /salesdata 向客户端返回如下的JSON数据：
[
{[label]: [部门1], [value]:300},
{[label]: [部门2], [value]:500},
{[label]: [部门3], [value]:150},
{[label]: [部门4], [value]:400},
{[label]: [部门5], [value]:550},
{[label]: [部门6], [value]:250}
]
客户端根据这些数据，绘制出如下图所示的统计图：
提示：为简化起见，可以把value值看做每个柱的高度。
1.Canvas的尺寸不能用CSS指定
使用CSS指定的Canvas尺寸，实际不是修改了画布尺寸，而是进行了拉伸，上面的绘图内容也会随着进行拉伸。
可以使用HTML标签的width和height属性，也可以使用JS对象的width和height属性。
2.使用Canvas进行绘图 —— 路径
Path：类似于PS中的[钢笔工具]，由多个坐标点组成的任意形状，路径不可见，可用于[描边]、[填充]、[裁剪]。
ctx.beginPath() 开始一条新路径
ctx.closePath() 闭合当前路径
ctx.moveTo(x, y) 移动到指定点
ctx.lineTo(x, y) 从当前点到指定点画直线
ctx.arc(cx, cy, r, start, end) 绘制圆拱路径
ctx.stroke() 对当前路径描边
ctx.fill() 对当前路径填充
ctx.clip() 使用当前路径进行裁剪
练习：使用路径描边绘制一个坐标轴
练习：使用圆拱绘制可以前进的圆环进度条
提示：开始角度是-90，使用定时器,不停的修改结束角
练习：创建一个函数openMouth()，在画布上绘制如下的图形
练习：创建一个函数closeMouth()，在画布上绘制如下的图形
练习：使用定时器，每隔1s中交替调用openMouth()和closeMouth()
3.使用Canvas进行绘图 —— 图像
Canvas属于客户端技术，图片在服务器中，所以浏览器必须先下载要绘制的图片，且等待图片异步加载完成：
var p3 = new Image();
p3.src = ‘img/p3.png’; //浏览器会自动异步请求图片
console.log(p3.width); //0
p3.onload = function(){ //图片加载完成
console.log(p3.width); //200
//开始绘制图片到画布上….
ctx.drawImage( p3, x, y ); //原始大小绘图
ctx.drawImage( p3, x, y, w, h ); //拉伸绘图
}
练习：在画布的四个角落各画一个原始大小的飞机
练习：在画布的正中央画一个400*200大小的飞机
练习：在画布的左上角画一个飞机，左右移动
练习：在画布的正中央画一个飞机，可以随着鼠标的移动而移动
全局变量： var x , y
鼠标在画布上方移动： e.offsetX e.offsetY
定时器：不停的删除已有内容，重绘飞机
Canvas绘图核心知识点：—— 重点
绘制矩形：
ctx.fillRect() ctx.strokeRect() ctx.clearRect()
绘制文本：
ctx.fillText() ctx.strokeText() ctx.measureText().width
绘制路径：
ctx.beginPath() ctx.closePath()
ctx.moveTo() ctx.lineTo()
ctx.arc()
ctx.stroke() ctx.fill() ctx.clip()
绘制图像：
ctx.drawImage()
4.使用Canvas绘图时进行变形操作
CSS中有变形相关样式： transform: rotate/scale/translate/skew，这些变形只能作用于某个HTML元素。
Canvas绘图中也有变形技术，可以针对某一个图像/图形的绘制过程进行变形：rotate、scale、translate。
ctx.rotate( 弧度 ) 旋转绘图上下文对象(即画笔),轴点是画布的原点
ctx.translate( x, y ) 将整个画布的原点平移到指定的点
ctx.save() 保存画笔当前的所有变形状态值(游戏中从存盘)
ctx.restore() 恢复画笔变形状态到最近的一次保存(游戏中读取存盘)
练习：在画布左上角画一个绕自己为中心旋转的飞机1;在同一个画布的右上角画一个不选旋转的飞机2;在同一个画布的左上角画一个旋转速度是飞机1速度2倍的飞机3
提示：每个小飞机[平移+旋转+绘制+逆向旋转+逆向平移]才不会影响后续飞机的绘制
5.第三方绘制统计图工具
(1)Chart.js：免费的，提供了八种统计图表
(2)FusionCharts.js：收费的，提供了90+中统计图表
(3)ECharts：百度提供的免费的绘图工具，与地图整合的很好
(4)FreeCharts ….
提示：第三方工具使用无需记忆!重点掌握自学的过程：
(1)打开官网，查看说明
https://www.chartjs.org/
(2)仿照DEMO编写示例
开源免费的、8种图表、基于H5 Canvas、支持响应式
(3)在实际项目中加以应用，查看详细API说明
您的浏览器不支持Canvas绘图!
new Chart(c15, {
type: 'bar',//line、pie、noughnut...
data: {},
options: {}
});
练习：参考手册，使用Chart.js绘制彩色的柱状图，且Y轴从0开始。
位图(Photoshop)：由一个又一个像素点组成，每个点各有自己的颜色，色彩细腻，但放大会失真
矢量图(Illustrator)：由一个又一个线条组成，每个线条可以指定颜色、方向，可以无限缩放，但细节不够丰富
6.HTML5新特性——SVG绘图
Scalable Vector Graph：可缩放的矢量图
Canvas绘图 SVG绘图
类型 2D位图 2D矢量图
如何绘图 使用JS代码绘图 使用标签绘图
事件绑定 每个图形不是元素，无法直接绑定事件 每个图形都是元素，可以直接绑定事件监听
应用场合 统计图、游戏 统计图、图标、地图
SVG技术诞生于2000年，早期作为XML的扩展应用出现;H5标准把常用的SVG标签采纳为标准，但有些被废弃掉。
SVG技术在HTML5出现之前的使用方法：
(1)在一个XML文档中声明要绘制的图形
(2)再编写HTML文档，使用IMG/IFRAME应用XML文档即可
SVG技术在HTML5出现之后的使用方法：
直接创建HTML5文档，在其中书写SVG标签即可
本身是一个300*150的inline-block。
使用SVG标签绘制矩形：
使用SVG标签绘制圆形：
使用SVG标签绘制椭圆：
使用SVG标签绘制直线：
使用SVG标签绘制折线：
使用SVG标签绘制多边形：
课后任务：
(1)编写一个带AUDIO标签的网页上传到自己的新浪云服务器，用iOS手机访问试试。
(2)自学第三方绘图工具库：ECharts，绘制股票走势图
(3) 使用Canvas绘制一个随机改变的验证码图片
var str = ‘ABCDEFGHJKLMNPQRSTWXY3456789’;
var char = str[ 0~字符串长度间的随机数 ];
要求：
画布背景颜色随机(浅色) ctx.fillRect()
文字内容随机、大小随机，颜色随机(深色)、旋转角度随机。
5条随机干扰线(深色)，处于文字上方。
100个杂色点(半径为1为圆)，处于文字上方。
4.仿网易云音乐的播放界面
点击播放按钮，碟片开始旋转，背景音乐开始播放;
再次点击播放按钮，碟片停止旋转，背景音乐停止播放。
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-H5新特性Canvas绘图技术的使用学习 全部内容，希望文章能够帮你解决 html5教程-H5新特性Canvas绘图技术的使用学习 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-H5新特性Canvas绘图技术的使用学习的详细内容...