此前用过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);画矩形,并填充 参数值
|
定义和用法
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 | 要清除的矩形的高度,以像素计 |