HTML5开发经验分享

分享的内容包括：（1）屏幕色彩的十六位字符抓取（2）canvas自适应大小

抓取颜色

1、美工给出的示意图颜色很漂亮，而我们开发界面总是找不到完全一致的颜色，导致页面不美观。今天为大家介绍一种简单的抓图工具，效果如图：

2、该抓图工具会分辨你鼠标目前的位置颜色，在中间的数据框中显示出来。确认颜色后按F2锁定颜色，然后点击十六进制串处即可完成复制。

3、我使用的工具是ColorPix.exe，大家可自行百度，这种软件还是蛮多的。

canvas自适应大小

1、使用canvas实现了画板，非常艰难的基本实现了美丽的界面，然后发现他不能够自适应页面，效果如图：

2、解决方法是增加宽度和高度的100%属性。<canvas id="myCanvasBody" style="height: 100%; width: 100%; margin: 0; padding: 0; display: block;"></canvas>效果如图，发现canvas可以自适应了。

3、以上修改有如下bug：1. 像素位置需要重新调整，改为动态变化（所以图中显示不再居中）2. 图像失真。前者尚可调整为动态展示，第2个问题确实canvas的硬伤，没办法，只能抛弃canvas，投入svg（矢量图）的怀抱了。