13 HTML5 Canvas 使用路径网页前端/web开发工程师

/ 福建师范大学传播学院网页前端/web开发工程师 / 2016-08-02

前端,HTML5

1.moveTo 与lineTo

代码示例:

<!DOCTYPE html>
<
html>
<
head lang="en">
    <
meta charset="UTF-8">
    <
title></title>
    <
script>
       
function draw(id)
        {
           
var canvas = document.getElementById("canvas");
           
var context = canvas.getContext("2d");
           
context.fillStyle="#eeeeef";
           
context.fillRect(0,0,300,400);
           
var dx=150;
           
var dy = 150;
           
var s =100;
           
context.beginPath();
           
context.fillStyle="rgb(100,255,100)";
           
context.strokeStyle="rgb(0,0,100)";
           
var x= Math.sin(0);
           
var y = Math.cos(0);
           
var dig = Math.PI/15*11;
           
for(var  i=0;i<30;i++)
            {
               
var x = Math.sin(i*dig);
               
var y = Math.cos(i*dig);
               
context.lineTo(dx+x*s,dy+y*s);

           
}
           
context.closePath();
           
context.fill();
           
context.stroke();
       
}
    </
script>
</
head>
<
body onload="draw('canvas')">
<
canvas id="canvas" width="300px" height="400px"></canvas>
</
body>
</
html>

 

前端,HTML5

2.绘制圆形

代码示例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function draw(id) {
            var canvas = document.getElementById("canvas");
           
if (canvas == null) {
                return false;
           
}
            var context = canvas.getContext("2d");
           
context.fillStyle = "#eeeeef";
           
context.fillRect(0, 0, 400, 400);
           
for(var  i=0;i<=10;i++)
            {
                context.beginPath();
               
context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
               
context.closePath();
               
context.fillStyle="rgba(255,0,0,0.25)";
               
context.fill();
           
}
        }

    </script>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="400px" height="400px"></canvas>
</body>
</html>


前端,HTML5

 

3.使用bezierCurveTo绘制贝塞尔曲线

代码示例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function draw(id) {
            var canvas = document.getElementById(id);
           
if(canvas==null)
            {
                return false;
           
}
            var context = canvas.getContext("2d");
           
context.fillStyle = "#eeeeef";
           
context.fillRect(0, 0, 300, 400);
           
var dx=150;
           
var dy=150;
           
var s=100;
           
context.beginPath();
           
context.fillStyle="rgb(100,255,100)";
           
var x=Math.sin(0);
           
var y=Math.cos(0);
           
var dig = Math.PI / 15*11;
           
context.moveTo(dx,dy);
           
for(var  i=0;i<30;i++)
            {
                var x=Math.sin(i*dig);
               
var y = Math.cos(i*dig);
               
context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s);
           
}
            context.closePath();
           
context.fill();
           
context.stroke();
       
}
    </script>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="300px" height="400px"></canvas>
</body>
</html>


前端,HTML5

前端,HTML5


公众号,微信

汇鱼网海峡创乐汇
汇鱼网海峡创乐汇