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

来源：互联网发布：批处理卸载软件编辑：程序博客网时间：2024/06/11 03:59

路径使用的一些总结：

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>

画出来的效果如下图：

这个画法不熟悉canvas操作的话，上来看可能会有点懵。（其实我也是看了一会才明白）
下面分解一下这种画法：
这样的：

（1）context.translate(75,75);将画布起点移动到了上面画的矩形的中心；
（2）context.moveTo(r,0);设置的是五角星的起点，就是第1个点；
（3）然后进入for循环，绘制剩下的9个点。每次绘制点前，都会调用context.rotate(Math.PI/5);函数，将画布以上面第一个步骤里移动后的点（就是矩形的中心）为中心，旋转PI/5;
然后就是两种情况了，偶数的时候，移动context.lineTo((r/0.525731)*0.200811,0);这个距离，例如i=0的时候，就是上面图上的第2个点；
奇数的时候，移动context.lineTo(r,0);这个距离，例如i=1的时候，就是上图的第3个点，这样画完9个点，加上起点，正好就是一个完整五角星的10个点了，关闭路径，绘制就出现图形了。

（2）五个点的画法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas7</title>
    <script>
 
        function draw(id){
            var canvas = document.getElementById(id);
            var context = canvas.getContext("2d");
            context.fillStyle = "#eeeeef";
            context.fillRect(0,0,500,500);
            context.shadowOffsetX = 10;
            context.shadowOffsetY = 10;
            context.shadowColor = "rgba(100,100,100,0.5)";
            context.shadowBlur = 3.5;
 
            context.translate(0,50);
            for(var i=0;i<3;i++){
                context.translate(100,100);
                create5Star(context);
                context.fill();
            }
        }
 
        function create5Star(context){
            var dx = 100;
            var dy = 0;
            var s = 50;
            context.beginPath();
            context.fillStyle = "rgba(255,0,0,0.5)";
            var x = Math.sin(0);
            var y = Math.cos(0);
            var dig = Math.PI/5*4;
            for(var i = 0;i<5;i++){
                var x = Math.sin(i*dig);
                var y = Math.cos(i*dig);
                context.lineTo(dx+x*s,dy+y*s);
            }
            context.closePath();
        }
    </script>
</head>
<body onload="draw('canvas')">
    <canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

效果如下图：

1 0