• 画布(canvas)效果之-填充色, 笔划色, 颜色值
  • 发布于 2个月前
  • 334 热度
    0 评论


示例

<!DOCTYPE HTML>
<html>
<head>
<title>填充色, 笔划色, 颜色值</title>
</head>
<body>
<canvas id="canvas" width="260" height="140" style="background-color: rgb(222, 222, 222)">
您的浏览器不支持 canvas 标签
</canvas>
<br />
<button type="button" onclick="drawIt();">Demo</button>
<button type="button" onclick="clearIt();">清除画布</button>

<script type="text/javascript">

var ctx = document.getElementById('canvas').getContext('2d');

function drawIt() {

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();
}

function clearIt() {
ctx.clearRect(
0, 0, 260, 140);
}

</script>
</body>
</html>
用户评论