Canvas——路径使用的一些感悟

路径使用的一些总结：

moveTo()和lineTo()函数都是用来移动点，绘制路径的函数，绘制完成后，调用closePath()函数，它会创建一条由描点的终点通向起点的虚拟路径，闭合整个路径，然后调用stroke()函数进行描边，最后可以用fill()函数来填充样式。

简单的实例代码如下：


<!DOCTYPE HTML>  

<html>  

<head>

<meta charset="utf-8">

 

<!--函数 S-->

 

<script type="text/javascript">

function canFun(){

var canvas=document.querySelector("canvas");  

var context=canvas.getContext("2d"); 

 

<!--五角星路径 S-->  

context.moveTo(76,197);

context.lineTo(421,197);  

context.lineTo(143,399);  

context.lineTo(248,71);  

context.lineTo(356,399);  

context.lineTo(76,197);

<!--五角星路径 E-->

 

<!--中心区域渐变 S-->

var radGrad=context.createRadialGradient(200,190,2,250,250,1800);

radGrad.addColorStop(0.0,"white");

radGrad.addColorStop(0.05,"yellow");

context.fillStyle=radGrad;

<!--中心区域渐变 E-->

 

<!--描边和填充 S-->

context.closePath();

context.lineWidth = 8;

context.stroke();

context.fill();

<!--描边和填充 E-->

 

<!--保持位置居于浏览器中心 S-->

canvas.style.position="absolute";

canvas.style.top=(document.documentElement.clientHeight-500)/2+"px";

canvas.style.left=(document.documentElement.clientWidth-500)/2+"px";

<!--保持位置居于浏览器中心 E-->

 

}

window.onload=window.onresize=canFun;

</script>

 

<!--函数 E-->

 

</head>

<body>

<canvas width="500" height="500" >该浏览器不支持canvas.</canvas>

</body>  

</html>

效果如下面的图片：

附加：绘制五角星的不同姿势


function draw(id){

            var canvas = document.getElementById(id);

            var context = canvas.getContext(‘2d‘);

            context.fillStyle = "green";

            context.fillRect(0,0,150,150);

            var r = 40;

            context.translate(75,75);

            context.beginPath();

            context.fillStyle="yellow";

            context.moveTo(r,0);

            for(var i=0;i<9;i++){

                context.rotate(Math.PI/5);

                if(i%2 == 0) {

                context.lineTo((r/0.525731)*0.200811,0);

                } else {

                context.lineTo(r,0);

                }

            }

            context.closePath();

 

            context.fill();

            context.stroke();

        }  

 

        <canvas id="canvas" width="150" height="150"></canvas>