码迷,mamicode.com
首页 > Web开发 > 详细

html5 canvas

时间:2014-06-18 10:35:17      阅读:274      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   code   java   ext   

 

The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).

1、<canvas>本身没有外观,只是在文档中创建了一个画板,我们需要使用脚本来画图

2、IE9前的浏览器不支持canvas

3、使用canvas画图如果需要移动时需要擦除后重新绘制,区别于svg

4、画图api大部分定义在canvas对象getContext("2d")获得的上下文对象上(CanvasRenderingContext2D对象)

5、每个canvas元素只有一个上下文对象,同一元素每次调用getContext()时得到的是同一个上下文对象

6、canvas允许保存当前图像状态,并且在已保存的状态间切换; 使用save()保存,使用restore()恢复

 

 


 

 

eg:创建canvas,获取CanvasRenderingContext2D对象:

var canvas = document.getElementById("square");
var context = canvas.getContext("2d");

<canvas id="square" width=10 height=10></canvas>

 

创建路径


 

 

创建路径:eg:

//路径定义
context.beginPath();
context.moveTo(100,100); //从100,100开始定义一条新的子路径
context.lineTo(200,200); //从100,100到200,200绘制线段
context.lineTo(300,400);//从200,200到300,400绘制线段

//绘制和填充路径
context.fill(); //填充
context.stroke();  //绘制

 

设置样式:


 

 

设置样式:

context.fillStyle = "#ccc";  //填充颜色
context.strokeStyle = "#008"; //绘制颜色
context.lineWidth = 5; //线宽

context.fill();
context.stoke();

 

保存和获取图像状态:


 

 

保存和获取图像状态:

context.restore(); //恢复最后一次保存的图像状态
context.save(); //再次保存以便下次使用

 

可以封装为如下工具函数,从状态栈中弹出最后一次保存的状态:

CanvasRenderingContext2D.prototype.revert = function(){
    this.restore();
    this.save();
    return this;
}

return this实现链式调用

 

坐标系变换:


 

 

坐标系变换:

translate(): 上下左右移动  + 或者 -

rotate(): 顺时针旋转  x + sin  y-cos

scale(): x和y轴进行延长或者缩短 *

 

颜色


 

 

颜色:支持RGB, RGBA, HSL, HSLA颜色空间,通过设置strokeStyle和fillStyle实现

HSL: hue, saturation, lightness

对于任何hsl颜色,亮度为100%时颜色都为纯白色;凡是亮度为0的颜色都是黑色

eg:

"#222";

"rgb(60,60,60)";

"rgba(60,60,60,0.5)";

‘‘transparent";

"hsl(60,100%, 50%)";

"hsla(60, 100%,50%,0.6)";

 

文本相关:


 

 

文本相关:

fillText();

strokeText();

textAlign();

textBaseLine();

 


 

阴影:

shadowColor

shadowOffsetX

shadowOffsetY

shadowBlur

 

 

其他:

sparkline: 迷你图,用于显示少量数据的图形,通常嵌入在文本流中,用于描述内嵌在文本、数字、图片中的且高分辨率的图形

 

 

 

 

 

 

html5 canvas,布布扣,bubuko.com

html5 canvas

标签:style   class   blog   code   java   ext   

原文地址:http://www.cnblogs.com/wishyouhappy/p/3793183.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!