HTML5移动开发学习笔记之Canvas基础_H5之家 - 中国HTML5教程资源分享第一站

文章详细内容

HTML5移动开发学习笔记之Canvas基础

发布日期：2014年05月16日来源：PHP1.CN 点击：64980

摘要：1.第一个Canvas程序看的是HTML5移动开发即学即用这本书，首先学习Canvas基础，废话不多说，直接看第一个例子。代码如下：1<!DOCTYPEhtml>2<html>3<head>4<metacharset"utf-8"/>5<styl...

1.第一个Canvas程序

看的是HTML5移动开发即学即用这本书，首先学习Canvas基础，废话不多说，直接看第一个例子。

代码如下：

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8" />

5 <style type="text/css">

6 canvas {

7 border-width: 5px;

8 border-style: dashed;

9 border-color: rgba(20, 126, 239, 0.50)

10 }

11 </style>

13 </head>

14 <body>

15 hello HTML5!

16 <canvas id="c1" width="300" height="300" ></canvas>

17 </body>

18 <script type="text/javascript">

19 //canvas对象的取得

20 var canvas=document.getElementById("c1");

21 //取得绘图用的上下文对象

22 var ctx=canvas.getContext("2d");

23 //绘图处理

24 ctx.fillStyle="rgb(255,0,0)";

25 ctx.fillRect(50,50,200,200);

26 ctx.fillStyle="rgba(0,0,255,0.5)";

27 ctx.fillRect(100,100,200,200);

28

29 </script>

30 </html>

复制代码

知识点：

Canvas 的基本用法

1）取得Canvas对象

2）从Canvas对象中获取绘图用的上下文

3）使用上下文中的方法与属性进行绘图

颜色的指定方法

1）ctx.fillStyle="#FF0000";

2）ctx.fillStyle="rgb(255,0,0)";

3）ctx.fillStyle="rgba(0,0,255,0.5)"; 最后这个指透明度的。。。

2.路径

绘制一个简单的三角形，效果：

代码如下：

复制代码

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8" />

5 <style type="text/css">

6 canvas {

7 border-width: 5px;

8 border-style: dashed;

9 border-color: rgba(20, 126, 239, 0.50)

10 }

11 </style>

13 </head>

14 <body>

15 hello HTML5!

16 <canvas id="c1" width="300" height="300" ></canvas>

17 </body>

18 <script type="text/javascript">

19 //canvas对象的取得

20 var canvas=document.getElementById("c1");

21 //取得绘图用的上下文对象

22 var ctx=canvas.getContext("2d");

23 //路径绘制开始

24 ctx.beginPath();

25 //路径的绘制

26 ctx.moveTo(0,0);

27 ctx.lineTo(0,290);

28 ctx.lineTo(290,290);

29 //路径绘制结束

30 ctx.closePath();

31 //进行绘图处理

32 ctx.fillStyle="rgb(200,0,0)"

33 ctx.fill();

34

35 </script>

36 </html>

复制代码

知识点：

控制路径时使用的方法：

1) beginPath() 重置路径的开始

2) closePath() 关闭到现在为止的路径

3) moveTo() 指定绘图开始时的基点（x,y）

4) lineTo() 绘制从前一次绘图位置到（x,y）的直线

绘制路径时使用的方法：

1）stroke() 绘制路径

2）fill()填充路径

指定绘图样式时使用的属性

1）fillStyle 指定填充时使用的颜色与样式

2）strokeStyle 指定路径的线颜色与样式

3）lineWidth 指定路径线的粗细

下面制作一个当用户触摸屏幕时在触摸位置绘制三角形的实例程序（书上的是用户触摸屏幕时绘制，现在改一下，鼠标移动时在移动的位置绘制三角形）效果：

代码如下：

复制代码

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8" />

5 <meta name="viewport" content="width=320,user-scalable=no" />

6 <style type="text/css">

7 canvas {

8 border-width: 5px;

9 border-style: dashed;

10 border-color: rgba(20, 126, 239, 0.50)

11 }

12 </style>

14 </head>

15 <body>

16 hello HTML5!

17 <canvas id="c1" width="300" height="300" ></canvas>

18 </body>

20 <script type="text/javascript">

22 function getPointOnCanvas(canvas, x, y) {

23 var bbox = canvas.getBoundingClientRect();

24 return { x: x - bbox.left * (canvas.width / bbox.width),

25 y: y - bbox.top * (canvas.height / bbox.height)};

26 }

27 //canvas对象的取得

28 var canvas=document.getElementById("c1");

29 //取得绘图用的上下文对象

30 var ctx=canvas.getContext("2d");

31 //设置Canvas的onmouse事件

32 canvas.onmousemove=function(event)

33 {

34 //取得鼠标移动处的坐标

35 var x=event.pageX;

36 var y=event.pageY;

37 var canvas=event.target;

38 var loc=getPointOnCanvas(canvas,x,y);

39 console.log("mouse down at point(x:"+loc.x+",y:"+loc.y+")");

41 var r=Math.random()*10+25;

42 //路径指定

44 ctx.beginPath();

45 ctx.moveTo(loc.x,loc.y);

46 ctx.lineTo(loc.x,loc.y+r);

47 ctx.lineTo(loc.x+r,loc.y+r);

48 ctx.lineTo(loc.x,loc.y);

50 //绘图

51 ctx.strokeStyle="red";

52 ctx.stroke();

53 };

54 </script>

55 </html>

复制代码

遇到的问题，刚开始取不到鼠标移动处的坐标，借鉴了这里面的方法，把效果做出来了，注意console.log()的运用，看下代码运行时的效果：

3.颜色定义

这一小节感觉书上分得不太合理，我实现以下这个程序是为了熟练下JS代码

效果：

代码如下：

复制代码

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8" />

5 <meta name="viewport" content="width=320,user-scalable=no" />

6 <style type="text/css">

7 canvas {

8 border-width: 5px;

9 border-style: dashed;

10 border-color: rgba(20, 126, 239, 0.50)

11 }

12 </style>

13 <script>

14 (function(){

15 window.addEventListener("load",function(){

16 var ctx=document.getElementById("c1").getContext("2d");

17 //圆1

18 ctx.beginPath();

19 ctx.arc(150,45,35,0,Math.PI*2,false);

20 ctx.fillStyle='rgba(192,80,77,0.7)';

21 ctx.fill();

22 ctx.strokeStyle='rgba(192,80,77,1)';

23 ctx.stroke();

25 //圆2

26 ctx.beginPath();

27 ctx.arc(125,95,35,0,Math.PI*2,false);

28 ctx.fillStyle='rgba(155,187,89,0.7)';

29 ctx.fill();

30 ctx.strokeStyle='rgba(155,187,89,1)';

31 ctx.stroke();

33 //圆3

34 ctx.beginPath();

35 ctx.arc(175,95,35,0,Math.PI*2,false);

36 ctx.fillStyle='rgba(128,100,162,0.7)';

37 ctx.fill();

38 ctx.strokeStyle='rgba(128,100,162,1)';