html5 canvas
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: 迷你图,用于显示少量数据的图形,通常嵌入在文本流中,用于描述内嵌在文本、数字、图片中的且高分辨率的图形
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。