您的位置：首页 > 其它

Canvas基础认识

2014-07-04 18:27 197 查看

HTML5 Canvas

简单的说就是js+html5可以自定义绘制任何图形

认识Canvas元素

<canvas id="canvas" width="500" height="500">

<!-- 不支持canvas的浏览器，这里会显示~~ -->

</canvas>

上面即是一个标准的Canvas的元素，暂时先当一个div去理解，只不过这个Canvas可以作图而已。

认识2D渲染上下文

通过js去访问，这个js对象是你真正绘制图形的地方。
小提示：绘图使用js访问操作2D渲染上下文对象，最后通过Canvas这个元素展示出来，也就是说Canvas只是一个展示的作用！

认识坐标系统

如何设定自定义图形在页面上的位置？使用坐标系统，坐标系统的概念同js的offsetTop，offsetLeft一模一样，就是以电脑屏幕最左上角的那个像素作为原点（0,0），横向是x轴为第一个0，纵向是y轴为第二个0。

访问2D渲染上下文对象

上面三个知识点够用了，马上实例操作

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<title>认识Canvas</title>

<body>

<canvas id="canvas" width="500" height="500">

<!-- 不支持canvas的浏览器，这里会显示~~ -->

</canvas>

</body>

</html>

<script>

var canvas = document.getElementById('canvas');//获取canvas的dom元素

var context = canvas.getContext('2d');//获得2d渲染上下文对象

context.fillRect(0,0,800,800);//创建一个矩形,从左上角x轴0，y轴0的位置，绘制一个宽300，高200的矩形

</script>

第14行很重要，获取2d对象，你可能会想到有没有3d，很抱歉，还没出来。
第15行fillRect方法绘制矩形用的，这里补充一下，关于颜色默认用的黑色填充内容，fillRect(x,y,width,height)。

小提示：假如Canvas的宽高数值比fillRect设置的数值小的话，那么fillRect的填充将会占满Canvas，溢出部分看不见的。就如同这里的Canvas宽高都是500像素，但是fillRect却是800像素，最终绘制出的只有Canvas当初设置的500像素的内容，溢出的300像素就不可见。

刷新页面你将可能到一个500像素的黑色色块，看起来效果应该不错吧？
好了，使用strokeRect替换fillRect，其他保持原样，再次刷新页面，看到了什么呢？动手试一试吧~
这两个函数参数都一样的，只是展示方式不一样~~

每天一点点，很多天就是很多点点~

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航