WebKit源码分析系列之(一) html5 canvas

最新推荐文章于 2022-04-14 18:41:29 发布

VIP文章东辉在线

最新推荐文章于 2022-04-14 18:41:29 发布

阅读量6.2k

点赞数 2

分类专栏： WebKit内核系列

本文链接：https://blog.csdn.net/lihui130135/article/details/8111239

版权

如今html5概念炒的很是火热，其中不乏标志性的tags，其中video算一个，把Adobe憋的不行，收购PhoneGap等系列的活动以应对html5之强势
两大不开源的公司Apple Adobe谁都不服气，以目前的势头看Apple走的更加深远些，闲话少说，我们说说今天的tag主角canvas
我们知道flash开发的时候，有专门画点画线的函数，有这样的接口对于开发小游戏，是相当方便，而且还可以制作出很炫的视觉效果，下面的几个链接
就是canvas应用
http://media.chikuyonok.ru/ambilight/
http://www.2cto.com/zz/201206/135837.html

canvas这么牛，倒是如何实现的那？
从样式上看canvas也只是一个普通的html标签（在webkit上还没有专门扩展过html那，找个时间实践下，哈哈）
下面我们看一个简单的canvas应用举例：
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas">your browser does not support the canvas tag </canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx= canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
</body>
</html>
我们做个简单的分析
<canvas id="myCanvas">your browser does not support the canvas tag </canvas>
典型的html语言的语法
这个办法的显示其实很简单，就是如果是不支持的tags，那么“your browser does not support the canvas tag”就是作为字符串进行处理了，
如果是支持该tags的情况下，这一段文字是不会去处理的，这个方式通常作为判断浏览器是否支持某个标签，例如在优酷或者土豆网站对浏览器的支持
<video src="video.ogg">
   <object data="videoplayer.swf" type="application/x-shockwave-flash">
     <param name="movie" value="video.swf"/>
   </object>
</video>
就是说在支持video的状态下，使用video标签播放，在不支持状态下，使用Adobe flash
好了继续分析网页内容
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
第一句很好理解，就是取到canvas实例对象
canvas.getContext('2d')
这句话得到画板句柄，根据传入的类型进行返回不同实例，普通的操作是2D方式，如果涉及到3D操作传入experimental-webgl或者webkit-3d参数，这样在网页上就可以执行3D的动作
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
这两句话就是具体绘制操作，画个红色矩形
不要小瞧这两句话，意味着在网页里面可以随便进行画点画线，一些绚丽操作的通道就开启了
上层逻辑的分析，基本上就是这种情况了。
下面进入底层的分析流程：
对于最基础的HTMLCanvasElement类的实例化，就先不做过多的分析了，直接分析底层
canvas.getContext('2d');这个函数的实现流程

CanvasRenderingContext* HTMLCanvasElement::getContext(const String& type, CanvasCont

最低0.47元/天解锁文章

东辉在线

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
WebKit源码分析系列之(一) html5 canvas

如今html5概念炒的很是火热，其中不乏标志性的tags，其中video算一个，把Adobe憋的不行，收购PhoneGap等系列的活动以应对html5之强势两大不开源的公司Apple Adobe谁都不服气，以目前的势头看Apple走的更加深远些，闲话少说，我们说说今天的tag主角canvas我们知道flash开发的时候，有专门画点画线的函数，有这样的接口对于开发小游戏，是相当方便，而且还可
复制链接

扫一扫