HTLM的六大新特性

HTLM的六大新特性

 

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

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

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

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

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

(1)实时走势图

(2)统计图表

(3)在线画图板

(4)地图

(5)游戏

Canvas绘图两个难点:

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

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

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

Canvas:画布,使用画笔可以在画布绘图。Canvas元素是一个300*150inline-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;

推荐阅读