IE9下html5初试小刀


Posted in HTML / CSS onSeptember 21, 2010

mvc是个好东西,为什么一入行的时候不去学一下,非要等到asp.net mvc出来了才去学;orm是个好东西,干嘛非要等到EF出来了才去学;html5是个好东西,干嘛非要等到IE9出来了才去学?......

——我想自己应该改掉这个坏毛病。

废话不多说了。

需求:模仿dreamweaver里为图片画上锚点的功能,生成html代码里的coords值的功能。

技术分析:直觉告诉我,html5 canvas可以胜任。

由于从来没实质性接触过canvas,只看过别人用canvas开发的demo,只好bing一下html5 canvas的教程咯。发现了下面的链接:http://kb.operachina.com/node/190

看完文档写代码:

代码分析:

1.1 html:要用一个图片作底,canvas放在它上面以供画图

1.2 css:你起码要位置放对、该透明的地方透明

1.3 javascript:鼠标事件要响应仨:mousedown,mousemove,mouseup

复制代码
代码如下:

<div id="container">
<img id="bg" width="390" height="560" src="http://www.sh1800.net/NavPic/20100917.jpg" />
<canvas id="drewpanel" width="390" height="560">
<p>some info to tell the people whose broswer doesn't support html5</p>
</canvas>
</div>

有经验的同学可能一看这html5代码就知道这注定是个悲剧,当有img元素在canvas下面时,不管怎样canvas就是不透明,忘记了canvas上可不可以画上东西了,应该也是不行的。看来这canvas元素有“洁癖”,不愿和其他低级元素同流合污。就算我要退而求其次,作为cantainer的背景元素出现都不行。我的感觉是这个canvas可能不会对其他元素透明的。所以上面的代码其实是错误的代码...

那怎么样才能实现类似photoshop里图层的效果呢?那就是多弄几个canvas元素,把上面的img换成canvas,然后把img绘制到这个canvas上,这样canvas对canvas就是透明的了。哎...代码如下:

复制代码
代码如下:

<div id="container">
<canvas id="bg" width="390" height="560"></canvas>
<canvas id="drewpanel" width="390" height="560">
<p>some info to tell the people whose broswer doesn't support html5</p>
</canvas>
</div>

好了html算是搞定了,接下去就是往canvas上绘图,借助于javascript,这个任务非常简单。

复制代码
代码如下:

window.addEventListener('load', function () {
// Get the canvas element.
var elem = document.getElementById('bg');
if (!elem || !elem.getContext) {
return;
}
// Get the canvas 2d context.
var context = elem.getContext('2d');
if (!context || !context.drawImage) {
return;
}
// Create a new image.
var img = new Image();
// Once it's loaded draw the image on the canvas.
img.addEventListener('load', function () {
// Original resolution: x, y.
context.drawImage(this, 0, 0);
// Now resize the image: x, y, w, h.
context.drawImage(this, 160, 0, 120, 70);
// Crop and resize the image: sx, sy, sw, sh, dx, dy, dw, dh.
context.drawImage(this, 8, 20, 140, 50, 0, 150, 350, 70);
}, false);
img.src = 'http://www.sh1800.net/NavPic/20100917.jpg';
}, false);
//直接在文档里拿下来的代码 请注意为了opera和ie9 onload事件是必须要的,不然图片会是一片空白,当然Chrome下不会这样

未完待续....
原文地址 http://www.cnblogs.com/ice6/archive/2010/09/18/1830020.html
HTML / CSS 相关文章推荐
CSS3实现时间轴效果
Jul 11 HTML / CSS
CSS3 实现弹幕的示例代码
Aug 07 HTML / CSS
2分钟教你实现环形/扇形菜单(基础版)
Jan 15 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
Nov 07 HTML / CSS
详解HTML5中的元素与元素
Aug 17 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
完美解决IE8下不兼容rgba()的问题
Mar 31 HTML / CSS
HTML5 层的叠加的实现
Jul 07 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 21 HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 HTML / CSS
CSS实现鼠标悬浮动画特效
May 07 HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 #HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 #HTML / CSS
HTML5边玩边学(1)画布实现方法
Sep 21 #HTML / CSS
html5 学习简单的拾色器
Sep 03 #HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
Jul 20 #HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
Jun 11 #HTML / CSS
用HTML5.0制作网页的教程
May 30 #HTML / CSS
You might like
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
浅析php与数据库代码开发规范
2013/08/08 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
通过微信公众平台获取公众号文章的方法示例
2019/12/25 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
Django中利用filter与simple_tag为前端自定义函数的实现方法
2017/06/15 Python
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
调解协议书
2014/04/16 职场文书
教师评语大全
2014/04/28 职场文书
公司投资建议书
2014/05/16 职场文书
交通事故和解协议书
2014/09/25 职场文书
医生个人年度总结
2015/02/28 职场文书
铁人观后感
2015/06/16 职场文书
JavaScript 原型与原型链详情
2021/11/02 Javascript