码迷,mamicode.com
首页 > Web开发 > 详细

HTML5 画布canvas元素

时间:2016-04-27 00:15:45      阅读:258      评论:0      收藏:0      [点我收藏+]

标签:

HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛。简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形。可别小看了这个画布,它能实现无限的可能性。接下来我们从最简单的部分开始,逐步认识Canvas的强大功能。 

1.在页面中添加canvas元素:

默认情况下,Canvas所创建的矩形区域大小为宽300像素,高150像素,不过我们可以使用width和height属性来自定义画布的宽度和高度。

像素概念:从定义上来看,像素是指基本原色素及其灰度的基本编码。像素是构成数码影像的基本单元,通常以像素每英寸PPI(pixels per inch)为单位来表示影像分辨率的大小。

例如:一张JPG图片 其PPI(pixel per inch) 像素 =300 知道图片尺寸可以算出共多少像素
ppi=300 就意味着每英寸有300个像素 长为5cm 1inch约=2.54cm  故5cm=(1/2.54)*5 inch 宽为3.8cm 3.8cm=3.8/2.54 inch 这张相片就是约590.55*448.82像素

 Ex:构造一个宽200像素,高100像素的画布,并设置实心的边框:

技术分享
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>我是标题</title>
</head>

<body>
<canvas id="myCanvas" style="border:1px solid;"width="200" height="100"></canvas>    
</body>
</html>
技术分享

2.Canvas如何绘制图形:

   1.在HTML5页面中添加canvas元素,必须定义canvas元素的id属性以便我们以后的调用。

<canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas>//这里设置canvas 的id为myCanvas
    

   2.在JavaScript代码中使用document.getElementById方法来寻找我们的canvas。

var ctx=document.getElementById("myCanvas")//找到我们创建的canvas

   3.然后我们使用getContext方法来获取canvas 元素的上下文(context),目前在画布中支持2d作图,所以getContext的参数为2d,也许在以后会支持3d作图后,参数也许会有3d。

 

var context=c.getContext("2d");

 

   4.使用JavaScript来进行绘图。在以后我们会接触到下面的基础绘图方法:

context.fillStyle="red"//设置填充颜色

context.fillRect(x1,y1,x2,y2)//其中x1,y1为矩形左上坐标,x2,y2为矩形右下坐标

context.strokeStyle="blue"//设置划线颜色

context.strokeRect(x1,y1,x2,y2)//同上所述

EX:构造宽200像素,高100像素的画布,在画布中创建一个填充颜色为#FF00FF的矩形

技术分享
<!doctype html>
<html>
<body>
<canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var context=c.getContext("2d");
    context.fillStyle="#FF00FF";
    context.fillRect(50,25,100,50);
</script>
</body>
</html>
技术分享

HTML5 画布canvas元素

标签:

原文地址:http://www.cnblogs.com/zhangzhongjie/p/5437139.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!