HTLM的六大新特性

一.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 id="c" width="500" height="100">

您的浏览器Canvas标签

</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;