学习笔记-画布

一、fillStyle：设置或返回用于填充绘画的颜色、渐变或模式。

1、定义用红色填充的矩形

<canvas id="myCanvas" width="300" height="150" style="border: 1px solid #d3d3d3;">
</canvas>
    <script>
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.fillStyle="#FF0000";
        ctx.fillRect(20,20,150,100);
    </script>
<!-- 定义用红色填充的矩形 -->

2、定义从上到下的渐变，作为矩形的填充样式。

<canvas id="myCanvas" width="300" height="100" style="border: 1px solid #d3d3d3"></canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var my_gradient=ctx.createLinearGradient(0,0,0,170);
    my_gradient.addColorStop(0,"black");
    my_gradient.addColorStop(1,"white");
    ctx.fillStyle=my_gradient;
    ctx.fillRect(20,20,150,100);
</script>

3、定义从左到右的渐变，作为矩形的填充样式。

<canvas id="myCanvas" width="300" height="100" style="border: 1px solid #d3d3d3"></canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var my_gradient=ctx.createLinearGradient(0,0,170,0);
    my_gradient.addColorStop(0,"black");
    my_gradient.addColorStop(1,"white");
    ctx.fillStyle=my_gradient;
    ctx.fillRect(20,20,150,100);
</script>

4、定义从黑到红到白的的渐变，作为矩形的填充样式。

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(0.5,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
</script>

二、strokeStyle：设置或返回用于笔触的颜色、渐变或模式。

1、红色笔触

<canvas id="myCanvas" width="300" height="150" style="border: 1px solid #d3d3d3"></canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.strokeStyle="#FF0000";
    ctx.strokeRect(20,20,150,100);
</script>