html5的canvas的学习笔记

html5的canvas的学习笔记

在html5中,canvas元素是一个非常重要的元素,用于完成网页中各种图形,图像与动画的绘制工作。

<body οnlοad="window_onload()"> 

<div><h1>使用canvas元素绘制指针式动画时钟</h1></div>

   <div><canvas id="canvas" width="200px"height="200px"></canvas></div>

</body>

1、取得页面中的canvas元素

   varcanvas=document.getElementById("canvas");

2、取得canvas元素的图形上下对象

在大多数程序中进行图形绘制时,都需要使用图形上下文(graphics context)对象。图形上下对象是一个封装了很多绘图功能的对象。在使用canvas元素进行图形绘制时,需要使用canvas对象的getContext方法来获得图形上下文对象,方法如下所示:

    varcontext=canvas.getContext('2d');

3、保存当前绘制状态。

   使用图形上下文对象的save方法来保存当前绘制状态,使用图形  上下文对象的restore方法恢复之前保存的绘制状态,代码如下:

  context.save();

  context.restore();

4、将指定的矩形区域中的图形擦除

  使用图形上下文对象的clearRect(x,y,width,height)

该方法使用四个参数:x是指定的矩形区域起点的横坐标;y是指定的矩形区域起点的纵坐标,坐标原点为canvas画布的左上角,width是指定的矩形域的长度,height是指定的矩形区域的高度。

5、平移坐标抽

使用图形上下文对象的translate方法移动坐标抽。代码如下。

context.translate(x,y);

translate方法有两个参数,x表示将坐标轴原点向左移动多少个单位,默认单位为像素;y表示将坐标轴原点向下移动多少个单位

6、创建路径

 在进行复杂图形的绘制时,需要先创建该图形的绘制路径,然后以这个路径为基础进行图形的绘制。使用图形上下文对象的beginpath方法开始路径的创建工作,代码如下:

context.beginPath();

7、设定绘图样式

在进行图形绘制的时候,首先要设定好绘图的样式(style),然后调用有关方法进行图形的绘制。所谓绘图的样式,主要是针对图形的颜色而言的,但是并不限于图形的颜色。

使用图形上下文对象的fillStyle属性来指定填充图形的样式,在该属性中填入填充的颜色或其他填充样式,代码如下所示。

context.fillStyle="green";

使用图形上下文对象的strokeStyle属性来指定图形边框的样式,在该属性中填入图形边框的颜色值或其他边框样式,代码如下所示:

context.strokeStyle="back";

8、绘制直线

       使用图形上下对象的lineTo方法绘制一条直线,代码如下:

lineTo(x,y);

该方法有两个参数,x表示直线终点的横坐标,y表示直线终点的纵坐标。

注意:该方法只是指定一条绘制直线的路径,绘制该直线的处理依靠fill方法(填充图形)或stroke方法(绘制图形边框)执行的。

9、填充图形

使用图形上下对象的fill方法填充图形(填充样式依靠fillStyle属性来指定),代码如下所示。

context.fill();

10、绘制图形边框

使用图形上下文对象的stroke方法绘制图形边框(边框样式依靠strokeStyle属性来指定),代码如下所示。

context.stroke();

11、关闭路径

路径创建完成后。使用图形上下文对象的closePath方法将路径关闭,代码如下所示。

context.closePath();

将路径关闭后,路径的创建工作就完成了。

12、创建圆形与弧形路径

   context.arc(x,y,radius,startAngle,endAngle,anticlockwise)

该方法有6个参数,x为圆形的起点横坐标,y为圆形的起点纵坐标,radius为圆形半径,startAngle为开始弧度,endAngle为结束弧度,anticlokwise为是否按顺时针方向进行绘制。

13、指定所绘文字的字体属性

   可以直接使用canvas元素的图形上下文对象的font属性来指定在canvas元素中绘制文字时所使用的字体属性。

  context.font='bold 16px 宋体’;

14、得到文字的宽度

    利用canvas元素的图形上下文对象的measureText方法来得到某个指定字符串在使用了指定字体大小后文字的宽度。代码如下所示:

metrics=context.measureText(text);

15、绘制文字

在canvas apl中,使用canvas元素的图形上下文对象的fillText方法或strokeText方法来绘制文字。

其中fillText方法以填充方式绘制字符串,代码如下所示:

void fillText(text,x,y,[maxWidth]);

strokeText方法以轮廓方式绘制字符串,该方法的定义如下所示:

void  strokeText(text,x,y,[maxWidth]);

16 填充矩形与绘制矩形边框的两种方法:

    context.fillRect(x,y,width,height)

fillRect方法使用4个参数,其中x是指矩形起点的横坐标,,y是指矩形起点的纵坐标,坐标原点为canvas画布的左上角,width是矩形的长度,height是指矩形的高度,四个参数,矩形的大小也同时被确定。

绘制矩形边框的方法如下:

context.strokeRect(x,y,width,height)

原理如上:

17、context.arc(x,y,r,sAngle,eAngle,counterclockwise);

参数值

参数

描述

x

圆的中心的 x 坐标。

y

圆的中心的 y 坐标。

r

圆的半径。

sAngle

起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)。

eAngle

结束角,以弧度计。

counterclockwise

可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。

18、drawImage()方法

    drawImage()方法在画布上绘制图像,画布或视频。

   drawImage()方法也能绘制图形的某些部分,以及或者增加或减少图像的尺寸。

第一种方法只使用三个参数,第一个参数image可以是一个img元素,一个video元素或者JavaScript中的一个image对象,使用该参数实际代表的对象来封装图形。x与y为绘制时该图像在画布中的起水坐标

context.drawImage(image,x,y);

第二种方法中的前三个参数与第一种方法中的一样,w,h是绘制时的图形的宽度与高度。第一种方法省去了这个两个参数,所以绘制出来的图像与原图大小相同,而第二种方法可以对图形进行放大放小。

context.drawImage(image,x,y,w,h);

参数

描述

img

规定要使用的图像、画布或视频。

sx

可选。开始剪切的 x 坐标位置。

sy

可选。开始剪切的 y 坐标位置。

swidth

可选。被剪切图像的宽度。

sheight

可选。被剪切图像的高度。

x

在画布上放置图像的 x 坐标位置。

y

在画布上放置图像的 y 坐标位置。

width

可选。要使用的图像的宽度。(伸展或缩小图像)

height

可选。要使用的图像的高度。(伸展或缩小图像)

context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);

 

参考书:HTML 5 开发精要与实例详解

参考网页:http://javascript.ruanyifeng.com/htmlapi/canvas.html

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值