Write Less, Do More(2)_H5之家 - 中国HTML5教程资源分享第一站

实例 - 渐变
使用您指定的颜色来绘制渐变背景：

ct_html5_canvas_gradient

Canvas 实例：渐变
JavaScript 代码：

canvas 元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var grd=cxt.createLinearGradient(0,0,175,50); grd.addColorStop(0,"#FF0000"); grd.addColorStop(1,"#00FF00"); cxt.fillStyle=grd; cxt.fillRect(0,0,175,50); </script> </body> </html>

亲自试一试

实例 - 图像
把一幅图像放置到画布上：

ct_html5_canvas_image

Canvas 实例：图像
JavaScript 代码：

canvas 元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>

亲自试一试

<!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var img=new Image() img.src="/i/eg_flower.png" cxt.drawImage(img,0,0); </script> </body> </html>

移动前端制作之自适应制作

随着移动前端的手机屏幕分辨率越来越多，自适应设计制作显得越来越重要。如何自适应屏高和屏宽是每个设计和制作人员共同需要考虑的事情。设计人员需要考虑N多分辨率的情况，而制作人员则需要考虑如何自适应布局等等。

我先从设计的角度来阐述这个问题，首先要考虑如何进行自适应设计。这个需要和制作人员进行沟通后决定，如果制作人员采用响应式布局（稍后会介绍此布局）的制作方案的话，则需要设计人员根据不同的屏宽来设计不同的效果图以便提供给制作人员进行响应式布局制作。如果制作人员采用高宽最大化（稍后会介绍此布局）来进行布局制作的话，则需要设计人员提供一个最合理的分辨率设计效果图来适应主流的所有分辨率屏幕的手机。

一、响应式布局

相应式布局的核心内容其实就是使用CSS3引入的Media Query模块。它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。

上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。

如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。

除了用html标签加载CSS文件，还可以在现有CSS文件中加载。

　@import url(“tinyScreen.css”) screen and (max-device-width: 400px);

同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。

　　@media screen and (max-device-width: 400px) { .column { float: none; width:auto; } #sidebar { display:none; } }

上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。

以上所述就是响应式布局，主要就是根据不同的分辨率而采用不同的设计风格。利用加载不同的CSS文件而达到这种自适应的制作。这种方法比较布局灵活，一般应用在手机横屏和竖屏浏览模式中。根据不同的浏览方式而获得到不同的布局方式。缺点是，设计成本和制作成本都较高，需要做不同的设计模版和页面模版，花费的时间较长。

二、高宽最大化