Html5 Canvas初探学习笔记(1)-画一个矩形

黄舟
Lepaskan: 2017-02-28 15:17:18
asal
1887 orang telah melayarinya

canvas元素是Html5相对于之前的Html的一个新增特性,本部分的博客文章就将研究这个组件的应用,尤其是在网页游戏开发上的应用。

canvas组件和之前的tablep等组件类似,都是不需要任何外部插件就可以运行的。只需使用html并且使用2D渲染上下文API2Drender context API)类似于我们j2me开发中的Grapicsandroid中的canvas画笔,只要得到这个上下文就可以调用它自带的方法来绘制。


我们可以通过如下的方法定义一个canvas

<canvas id="canvas" width="400" height="400"> </canvas>
Salin selepas log masuk

Canvas的是作为2D渲染上下文的一个包装器,2D渲染上下文是基于canvas画布的“画笔”。它采用平面的笛卡尔坐标系统,左上角为原点(00)。向右移动,x的坐标值会增加,向下移动时,y值会增加,这点很像我们的j2me的画布。

好了,在介绍了一些基本概念以后,我将构建第一个Html5 Canvas,首先效果图如下



很简单的一个例子,就是画一个矩形,下面来看代码:


其中canvas的标签处就是定义一个canvas画布,但是并没有作任何的处理,标签script的部分是js的代码部分,其中如下的部分是获得渲染上下文:

var canvas = document.getElementById(&#39;canvas&#39;);
var context = canvas.getContext(&#39;2d&#39;);
Salin selepas log masuk

首先获得canvas元素,然后获得2d渲染得上下文。

如下的代码是画矩形部分:

context.fillStyle = &#39;#000000&#39;;
context.fillRect(50, 50, 100, 100);
Salin selepas log masuk

首先设置颜色,然后画,四个参数分别是起点的横纵坐标和宽高

 以上就是Html5 Canvas初探学习笔记(1)-画一个矩形 的内容,更多相关内容请关注PHP中文网(www.php.cn)!


Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan