本篇内容主要讲解“HTLM的六大新特性是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“HTLM的六大新特性是什么”吧!

创新互联主营文安网站建设的网络公司,主营网站建设方案,重庆App定制开发,文安h5微信小程序定制开发搭建,文安网站营销推广欢迎文安等地区企业咨询

一.Web领域可以使用的绘图技术

(1)WebGL ——强大，早已出现，不是HTML标准

(2)SVG ——早已出现，纳入HTML5标准

(3)Canvas ——最近出现，是HTML5标准

网页绘图可以实现的功能：

(1)实时走势图

(2)统计图表

(3)在线画图板

(4)地图

(5)游戏

Canvas绘图两个难点：

(1)方法名多，不好记忆

(2)坐标点值计算——小学数学+二次方程+三角函数

二.HTML5新特性之三——Canvas绘图技术

Canvas：画布，使用画笔可以在画布绘图。Canvas元素是一个300*150的inline-block。

注意：Canvas的宽和高不能使用CSS样式来设定！

您的浏览器Canvas标签

//Canvas绘图技术属于JS绘图技术

var ctx = c9.getContext('2d');//获取画布上的画笔——绘图上下文对象

绘图上下文对象常用的属性：

fillStyle: '#000'填充样式

strokeStyle:'#000'轮廓/描边样式

lineWidth: 1描边宽度

font: "10px sans-serif"字体

textAlign: 'start'文本对齐

textBaseline: 'alphabetic'文本基线

shadowColor: 'rgba(0,0,0,0)阴影颜色

shadowBlur: 0阴影模糊半径

shawdowOffsetX: 0阴影的水平偏移量

shawdowOffsetY: 0

绘图上下文对象常用的方法：

(1)绘制矩形

(2)绘制文本

(3)绘图路径

(4)绘图图像

三.使用Canvas绘图上下文绘制矩形

注意：矩形的定位点在自己的左上角

ctx.fillStyle = '#000';填充颜色

ctx.strokeStyle = '#000';描边颜色

ctx.lineWidth = 1;描边线宽

ctx.fillRect(x, y, w, h)填充一个矩形

ctx.strokeRect(x, y, w, h)描边一个矩形

ctx.clearRect(x, y, w, h)清除一个矩形范围内所有的内容

四.使用Canvas绘图上下文绘制文本

注意：字符串的定位点在文本基线的最左端

ctx.textBaseline = 'alphabetic' //文本基线，top / bottom / middle

ctx.font = "10px sans-serif";字体大小

ctx.fillText( txt, x, y )填充文字

ctx.strokeText( txt, x, y )描边文字

ctx.measureText(txt).width基于当前的字体设置，测量指定文本的总宽度

五.为图形添加阴影

ctx.shadowColor = 'rgba(255,255,0,1)';

ctx.shadowBlur = 5;

ctx.shadowOffsetX = 5;

ctx.shadowOffsetY = 5;

六.为图形添加渐变色样式

创建线性渐变对象：

var g = ctx.createLinearGradient(50,150,450,150);

g.addColorStop(0, '#f00'); //添加颜色点

g.addColorStop(0.5, '#ff0'); //添加颜色点

g.addColorStop(1, '#0f0'); //添加颜色点

将渐变对象应用于填充样式或描边样式

ctx.fillStyle = g;

ctx.strokeStyle = g;

到此，相信大家对“HTLM的六大新特性是什么”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

名称栏目：HTLM的六大新特性是什么
本文链接：http://hbruida.cn/article/jpdcds.html