欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

H5新特性Canvas绘图技术的使用学习

程序员文章站 2022-05-16 21:10:22
h5新特性canvas绘图技术的使用学习 canvas:画布,是h5提供的2d绘图技术。 您的不支持canvas标签! canvas标签在浏览器中默认是300*150的inline-block。画布...

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.仿网易云音乐的播放界面

点击播放按钮,碟片开始旋转,背景音乐开始播放;

再次点击播放按钮,碟片停止旋转,背景音乐停止播放。