html5画板正方形填充颜色,画布（canvas）效果之-填充色, 笔划色, 颜色值

填充色, 笔划色, 颜色值

您的浏览器不支持 canvas遇新是直朋能到 标签

Demo

清除画布

clearIt();/** context.fillStyle - 指定填充色的颜色值

*

* context.strokeStyle - 指定笔划色的颜色值

*

* 颜色值示例如下：

* Color Name - "green"

* #rgb - "#0f0"

* #rrggbb = "#00ff00"

* rgb(0-255, 0-255, 0-255) - rgb(0, 255, 0)

* rgb(0.0%-100.0%, 0.0%-100.0%, 0.0%-100.0%) - rgb(0%, 100%, 0%)

* rgba(0-255, 0-255, 0-255, 0.0-1.0) - rgb(0, 255, 0, 1)

* rgba(0.0%-100.0%, 0.0%-100.0%, 0.0%-100.0%, 0.0-1.0) - rgb(0%, 100%, 0%, 1)*/ctx.fillStyle= 'Red';

ctx.strokeStyle= 'Green';

ctx.lineWidth= 10;//看看 fillStyle 颜色的示例和 strokeStyle 颜色的示例，以及先 stroke 再 fill 和先 fill 再 stroke 的区别ctx.beginPath();

ctx.rect(20,20,100,100);

ctx.stroke();

ctx.fill();

ctx.beginPath();

ctx.rect(140,20,100,100);

ctx.fill();

ctx.stroke();

}functionclearIt() {

ctx.clearRect(0,0,260,140);

}