canvas的主要方法(1)

此前用过canvas的,针对自己所写的功能,例举几个主要的方法和属性,

ctx.fillStyle="#0000ff";//fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。一个是填充的颜色
ctx.strokeStyle="#0000ff";//strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。一个是笔头的颜色
ctx.rect(20,20,150,100);//rect() 方法创建矩形。

JavaScript 语法:

context.rect(x,y,width,height);画矩形,不填充,用stroke()方法画实线。可以使用fill()方法进行填充

参数值

x矩形左上角的 x 坐标
y矩形左上角的 y 坐标
width矩形的宽度,以像素计
height矩形的高度,以像素计

width:可以是正数也可以是负数,是负数则在相反的方向画出矩形

height:可以是正数也可以是负数,是负数则在相反的方向画出矩形

JavaScript 语法:

context.fillRect(x,y,width,height);画矩形,并填充

参数值

x矩形左上角的 x 坐标
y矩形左上角的 y 坐标
width矩形的宽度,以像素计
height矩形的高度,以像素计
 

定义和用法

strokeRect() 方法绘制矩形(不填色)。笔触的默认颜色是黑色。

提示:请使用 strokeStyle 属性来设置笔触的颜色、渐变或模式。

JavaScript 语法:

context.strokeRect(x,y,width,height);这个只能画不填充的矩形,不能进行内部填充颜色

参数值

x矩形左上角的 x 坐标
y矩形左上角的 y 坐标
width矩形的宽度,以像素计
height矩形的高度,以像素计

定义和用法

clearRect() 方法清空给定矩形内的指定像素。

JavaScript 语法:

context.clearRect(x,y,width,height);//清空指定矩形的像素

参数值

x要清除的矩形左上角的 x 坐标
y要清除的矩形左上角的 y 坐标
width要清除的矩形的宽度,以像素计
height要清除的矩形的高度,以像素计

相关推荐