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

Html5 Canvas 初探学习笔记(1)-画一个矩形
canvas 元素是 Html5 相对于之前的 Html 的一个新增特性， 本部分的博客文章就将研究 这个组件的应用，尤其是在网页游戏开发上的应用。 canvas 组件和之前的 table 和 div 等组件类似， 都是不需要任何外部插件就可以运行的。 只需使用 html 并且使用 2D 渲染上下文 API（2D

render context API）类似于我们 j2me 开发 中的 Grapics 和 android 中的 canvas 画笔，只要得到这个上下文就可以调用它自带的方法来 绘制。 我们可以通过如下的方法定义一个 canvas： <canvas id="canvas" width="400" height="400"> </canvas> Canvas 的是作为 2D 渲染上下文的一个包装器， 渲染上下文是基于 canvas 画布的 2D “画笔” 。 它采用平面的笛卡尔坐标系统，左上角为原点（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); 首先设置颜色，然后画，四个参数分别是起点的横纵坐标和宽高 如有错误，希望大家多多指正 下一篇继续研究 2D 渲染上下文 API



Html5 Canvas初探学习笔记(1)-画一个矩形—学习资料共享网是一个在线免费学习平台、通过收集整理大量专业知识，职业资料、考试资料,考试复习指导,试题资料等给大家分享;同时提供学习互动交流;更好的帮助大家学习。

点击搜索更多“Html5 Canvas初探学习笔记(1)-画一个矩形”相关的内容
下载《Html5 Canvas初探学习笔记(1)-画一个矩形》