HTML5初窥3---Canvas

1.What is Canvas？   

Canvas是通过JavaScript在网页上绘制图像。

标签只是个图形容器，必须使用脚本来绘图。

2.默认情况下标签是没有边框和内容。注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小。eg. 通过JavaScript绘制：

3.在HTML页面中使用多个 元素。

4.坐标解析：fillRect 方法拥有参数 (0,0,150,75)

1）Canvas是一个二维网格。

2）0,0 表示从屏幕的左上角开始3）150,75 表示在画布上绘制150*75的矩形。

 

实例一（线条）：

在Canvas上画线条，需要使用moveTo(x,y) 定义线条开始坐标lineTo(x,y) 定义线条结束坐标Stoke()

--------------------------------------------------------------------------

JavaScript 代码：

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();

</script>

 

---------------------

canvas 元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
</canvas>

 

实例二：（绘制圆形）

绘制圆形，需要使用：arc(x,y,r,start,stop)“ink”的方法，如 stoke()或者fill()

--------------------------------------------------------------

JavaScript 代码：

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

</script>

 

--------------------------------

canvas 元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
</canvas>

 

实例三（文本）：

使用canvas绘制文本，重要的属性和方法如下：

font - 定义字体

fillText(text,x,y) - 在 canvas 上绘制实心的文本

strokeText(text,x,y) - 在 canvas 上绘制空心的文本

使用fillText():

-------------------------------------------------

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

----------------------------------

使用stokeText();

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

</script>