canvas 中绘制的图像默认是黑色, 当然我们是可以给它设置颜色的。

fillStyle

设置图像的背景色

strokeStyle

设置线条的颜色

lineWidth

设置线条宽度

globalAlpha

设置透明度

var ctx = document.getElementById('canvas').getContext('2d');
ctx.globalAlpha = 0.5;  //设置透明度为 0.5

fillStyle 红色背景的四边形

<canvas id="canvas-1" width="300" height="300" style="border: 1px solid #333;"></canvas>

<script>
var canvas = document.getElementById("canvas-1");
var ctx = canvas.getContext('2d');
ctx.fillStyle = "#ff0000";   //先设置颜色
ctx.fillRect(50,50,200,200); //在画图像
</script>

strokeStyle 红色边框的圆

<canvas id="canvas-2" width="300" height="300" style="border: 1px solid #333;"></canvas>

<script>
var canvas = document.getElementById("canvas-2");
var ctx = canvas.getContext('2d');
ctx.strokeStyle = "#ff0000";       //先设置颜色
ctx.arc(100,100,50,0,Math.PI * 2); //在画图像
ctx.stroke();
</script>

lineWidth 绘制 10px 宽的线条

<canvas id="canvas-3" width="300" height="300" style="border: 1px solid #333;"></canvas>

<script>
var canvas = document.getElementById("canvas-3");
var ctx = canvas.getContext('2d');
ctx.lineWidth = 10;
ctx.strokeStyle = "#ff0000";       //先设置颜色
ctx.beginPath();
ctx.moveTo(50,50);    
ctx.lineTo(200,200);  
ctx.stroke();        
</script>