canvas元素是html5相对于之前的html的一个新增特性，本部分的博客文章就将研究这个组件的应用，尤其是在网页游戏开发上的应用。
canvas组件和之前的table和p等组件类似，都是不需要任何外部插件就可以运行的。只需使用html并且使用2D渲染上下文API（2Drender context API）类似于我们j2me开发中的Grapics和android中的canvas画笔，只要得到这个上下文就可以调用它自带的方法来绘制。
我们可以通过如下的方法定义一个canvas：
<canvas id="canvas" width="400" height="400"> </canvas>
Canvas的是作为2D渲染上下文的一个包装器，2D渲染上下文是基于canvas画布的“画笔”。它采用平面的笛卡尔坐标系统，左上角为原点（0，0）。向右移动，x的坐标值会增加，向下移动时，y值会增加，这点很像我们的j2me的画布。
好了，在介绍了一些基本概念以后，我将构建第一个Html5 Canvas，首先效果图如下
很简单的一个例子，就是画一个矩形，下面来看代码：
立即学习“前端免费学习笔记（深入）”；
其中canvas的标签处就是定义一个canvas画布，但是并没有作任何的处理，标签script的部分是js的代码部分，其中如下的部分是获得渲染上下文：
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');首先获得canvas元素，然后获得2d渲染得上下文。
如下的代码是画矩形部分：
context.fillStyle = '#000000'; context.fillRect(50, 50, 100, 100);
首先设置颜色，然后画，四个参数分别是起点的横纵坐标和宽高
以上就是Html5 Canvas初探学习笔记(1)-画一个矩形 的内容，更多相关内容请关注PHP中文网（www.php.cn）！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
470
