canvas学习笔记(三)

现在来看看用canvas来绘制一张已经存在的图片

var canvas = document.getElementById('example2');
var ctx2 = canvas.getContext('2d');
var img = new Image();
img.onload = function(){
canvas.width = img.width;
canvas.height = img.height;
ctx2.drawImage(img,0,0);
}
img.src = "img.jpg";

ctx2.drawImage(img,0,0) 是在画布(0,0)的位置上画出img.jpg这张图像,当img没有完全载入的时候,drawImage已经执行会导致后面的脚本全部停止运行,所以给了img一个onload事件来保证drawImage的时候已经完全载入了img。
Read More…

Posted in CSS, HTML5, javascript at 四月 6th, 2010. No Comments.

canvas 学习笔记(二)


实现以上图形的代码如下
Read More…

Posted in HTML5, javascript at 三月 25th, 2010. 3 Comments.

canvas 学习笔记(一)

canvas元素 翻译过来是 画布,帆布
最早在苹果浏览器中引进,逐渐普及成HTML5的 标准Element 这个元素的具体参见可以看
这里
通过canvas我们可以在浏览器中画出很多不规则或是规则的图形
如何画呢?
在HTML5的标准里看到DOM接口的描述

Read More…

Posted in HTML5, javascript at 三月 22nd, 2010. No Comments.