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	要清除的矩形的高度，以像素计