小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man
canvas元素是Html5相对于之前的Html的一个新增特性,本部分的博客文章就将研究这个组件的应用,尤其是在网页游戏开发上的应用。
canvas组件和之前的table和div等组件类似,都是不需要任何外部插件就可以运行的。只需使用html并且使用2D渲染上下文API(2DrendercontextAPI)类似于我们j2me开发中的Grapics和android中的canvas画笔,只要得到这个上下文就可以调用它自带的方法来绘制。
我们可以通过如下的方法定义一个canvas:
<canvasid="canvas"width="400"height="400"></canvas>
Canvas的是作为2D渲染上下文的一个包装器,2D渲染上下文是基于canvas画布的“画笔”。它采用平面的笛卡尔坐标系统,左上角为原点(0,0)。向右移动,x的坐标值会增加,向下移动时,y值会增加,这点很像我们的j2me的画布。
好了,在介绍了一些基本概念以后,我将构建第一个Html5Canvas,首先效果图如下
很简单的一个例子,就是画一个矩形,下面来看代码:
其中canvas的标签处就是定义一个canvas画布,但是并没有作任何的处理,标签script的部分是js的代码部分,其中如下的部分是获得渲染上下文:
varcanvas=document.getElementById('canvas');
varcontext=canvas.getContext('2d');
首先获得canvas元素,然后获得2d渲染得上下文。
如下的代码是画矩形部分:
context.fillStyle='#000000';
context.fillRect(50,50,100,100);
首先设置颜色,然后画,四个参数分别是起点的横纵坐标和宽高
如有错误,希望大家多多指正
下一篇继续研究2D渲染上下文API
分享到:
相关推荐
QML--Canvas画布实现矩形圆形等圈定
canvas-js-动画-例子
canvas 画板可以画画,画圆,矩形,还有橡皮擦
HTML5 Canvas生成粒子效果的人物头像html5-canvas-pixel-image-master.zip
html5-canvas-rabbit-run-games-code 3d游戏 适应手机和PC
html5-canvas-border-pixel-progressbar源码
现在以用canvas画一个对角线为例: 复制代码代码如下: <!DOCTYPE html> <head> <meta charset=utf-8 /> <title>canvas</title> [removed] [removed] = function(){ getCanvas(); }; //...
html5 canvas画布里面圆球弹跳动画效果代码 html5 canvas画布里面圆球弹跳动画效果代码
html5-canvas-3d-earth-rotate.zip
html5-canvas-3d-line-avatar.zip
html2canvas-1.0.0-rc.4版本
HTML5 Canvas核心技术 图形、动画与游戏开发
uni-app 利用canvas进行画框,移动框,放大缩小并删除,目前支持小程序,h5,其他没测试过
1.该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM,因此可能不是 100% 准确到真实表示,因为它不会制作实际的屏幕截图,而是根据页面上可用的信息构建屏幕截图。 2.它只能正确渲染它...
之前我们分享过很多基于CSS3和HTML5 ...这次我们要介绍的是一款基于HTML5 Canvas的3D立方体波浪动画,一个个小立方体组成一个立体面,立方体按一定数学规则上下浮动,形成了炫酷的波浪动画效果。 在线演示源码下载
html5-canvas-520-love-cartoon-codes(jb51.net).rar
根据HTML5中的Canvas,同时根据鼠标的移动来画矩形,可以成功运行,刚开始学,不会,折腾了好久,希望对需要的人有帮助。
js html5 canvas制作多个小球碰撞的动画效果 js html5 canvas制作多个小球碰撞的动画效果
高清版 HTML5 CANVAS核心技术图形动画与游戏开发(爱飞翔).pdf