学习笔记-Canvas2-2017-2-10

1、颜色、样式和阴影

<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000"
    ctx.strokeStyle="blue";
    ctx.shadowBlur="10";
    ctx.shadowColor="black";
    ctx.shadowOffsetX="5";
    ctx.fillRect(0,0,50,50);
</script>

2、createPattern() 方法

![](image/img_lamp.jpg)
<button onclick="draw('repeat')">重复</button>
<button onclick="draw('repeat-x')">重复-x</button>
<button onclick="draw('repeat-y')">重复-y</button>
<button onclick="draw('no-repeat')">不重复</button>
<canvas id="myCanvas" width="300" height="150" style="border: 1px solid #ccc;"></canvas>
<script type="text/javascript">
function draw(direction)
{var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.clearRect(0,0,c.width,c.height);
    var img=document.getElementById("lamp")
    var pat=ctx.createPattern(img,direction);
    ctx.rect(0,0,220,128);
    ctx.fillStyle=pat;
    ctx.fill();
}
</script>

3、lineCap 属性

<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.lineWidth=10;
    ctx.lineCap="butt";//向线条的每个末端添加平直的边缘。
    ctx.moveTo(20,20);
    ctx.lineTo(200,20);
    ctx.stroke();

    ctx.beginPath();
    ctx.lineWidth=10;
    ctx.lineCap="round";//向线条的每个末端添加平直的边缘。
    ctx.moveTo(20,40);
    ctx.lineTo(200,40);
    ctx.stroke();

    ctx.beginPath();
    ctx.lineWidth=10;
    ctx.lineCap="square";//向线条的每个末端添加正方形线帽。
    ctx.moveTo(20,60);
    ctx.lineTo(200,60);
    ctx.stroke();
</script>

4、lineJoin 属性

<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.lineJoin="round";
    ctx.moveTo(20,20);
    ctx.lineTo(100,50);
    ctx.lineTo(20,100);
    ctx.stroke();
</script>