189 8069 5689
本篇内容主要讲解“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的六大新特性是什么”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！