1.如何等待所有图片加载完成后,才开始绘图?
多张图片绘制需要按照特定的顺序,而加载完成顺序是完全无法预测,只能等待所有图片加载完成,才能开始绘制。
/***************************
//典型的错误代码
var img1 = new Image();
img1.src = "";
img1.onload = function(){
ctx.drawImage(img1, x, y);
}
var img2 = new Image();
img2.src = "";
img2.onload = function(){
ctx.drawImage(img2, x, y);
}
******************************/
var progress = 0; //加载进度 0~100
var img1 = new Image();
img1.src = "";
img1.onload = function(){
progress += 80;
if(progress===100){
startDraw();
}
}
var img2 = new Image();
img2.src = "";
img2.onload = function(){
progress += 20;
if(progress===100){
startDraw();
}
}
2.如何为Canvas上的图形/图像绑定事件监听?——难点
网页只能为DOM元素绑定监听函数,Canvas绘图技术中只要一个Canvas元素,其它图形图像都不是元素——无法进行事件绑定!——
解决办法:为Canvas绑定监听函数,获取事件发生的坐标,是否处于目标图形/图像所在范围内——只能为规则的图形“绑定”监听
Adobe Photoshop:处理位图——每幅图像由点(rgb)组成,善于描述颜色的细节变化,可用于照片等领域——放大后会出现马赛克失真。 Adobe Illustrator:处理矢量图——每幅图像由线条(需要指定方向、值),可以无限缩放而不失真——不善于描述颜色的细节变化。 |
3.HTML5新特性之五——SVG绘图
| Canvas绘图 | SVG绘图 |
绘图类型 | 位图 | 矢量图 |
缩放 | 失真 | 不失真 |
颜色细节 | 丰富 | 不够丰富 |
应用领域 | 照片、游戏 | 统计图、图标、地图 |
内容 | JS绘制 | 每个图形都是标签 |
事件绑定 | 不方便 | 方便 |
Scalable Vector Graphiph,可缩放的矢量图,此技术在2000年就已经存在了,独立于网页的一门技术;HTML5之后,纳入了HTML5标准标签库,并进行了一定的瘦身。
SVG技术的使用方法:
(1)HTML5之前的使用方法:
SVG标签不属于HTML4或XHTML标签,只能编写在独立的XML文件中,首先编写一个SVG文件(本质是一个XML文件),然后在HTML中使用IMG/IFRAME/OBJECT/EMBED等标签引入.svg文件
(2)HTML5之后的使用方法——H5已经把SVG标签采纳:
在HTML文件中直接使用SVG相关标签即可
<svg>默认为300*150的inline-block</svg>
4.使用SVG绘制矩形
<rect width="" height="" x="" y="" fill="" fill-opacity="" stroke="" stroke-width="" stroke-opacity=""></rect>
注意:
(1)SVG图形的样式可以用HTML属性赋值,也可以使用CSS形式,但不接受普通的CSS属性!只能使用SVG元素的专有样式属性。
(2)SVG图形的属性不属于HTMLDOM标准,只能使用核心DOM方法操作其属性: rect.setAttribute('','')
(3)使用JS动态创建SVG元素,1)用svg.innerHTML ='' 2)用document.createElementNS('', ''),不能使用document.createElement()
(4)SVG元素的nodeName都是纯小写形式!与普通的HTML元素不同!
5.使用SVG绘制圆形
<circle r="" cx="" cy=""></circle>
6.使用SVG绘制椭圆
<ellipse rx="" ry="" cx="" cy=""></ellipse>
7.使用SVG绘制直线
<line x1="" y1="" x2="" y2="" stroke=""></line>
注意:所有的SVG图形默认只有填充色,没有描边色。
8.使用SVG绘制折线
<polyline points="x1,y1 x2,y2 x3,y3 ....." stroke="" fill-opacity="0"></polyline>
9.使用SVG绘制多边形
<polygon points="x1,y1 x2,y2 ...."></polygon>
10.使用SVG绘制文本
提示:传统的标签不能置于SVG内部!同理,SVG的标签也不能放在其它元素内部!
<text x="" y="" font-size="" alignment-baseline="before-edge">文本内容</text>
11 .使用SVG绘制图像
提示:在SVG中绘制图像使用image元素,引入位图后,此SVG图片放大后会失真。
<image width="" height="" xlink:href="x.jpg" x="" y=""></image>
12.如何使用渐变效果
<svg width="600" height="400" id="svg15">
<!--渐变属于特效,必须声明在“特效列表”-->
<defs>
<linearGradient id="g1" x1="0" y1="0" x2="100%" y2="0">
<stop offset="0" stop-color="#f00"></stop>
<stop offset="100%" stop-color="#0f0"></stop>
</linearGradient>
</defs>
<rect fill="url(#g1)"></rect>
</svg>