您的位置：首页 > Web前端 > HTML5

HTML5 学习笔记13-Canvas使用路径

2017-01-17 15:50 645 查看

1、绘制圆形

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绘制圆形</title>
<script>
function drawCircle(){
var canvas=document.getElementById("canvas");
if(canvas==null){
return false;
}
var context=canvas.getContext("2d");
context.fillStyle="#232323";
context.fillRect(0,0,800,800);
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="drawCircle()">
<canvas id="canvas" width="800px" height="800px"></canvas>
</body>
</html>

2、moveto和lineto

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>moveto和lineto</title>
</head>
<body onload="draw()">
<canvas id="canvas" width="300" height="400"></canvas>
<script>
function draw(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.fillStyle="#eeeeee";
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 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>
</body>
</html>

3、绘制贝塞尔曲线

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body onload="draw()">
<canvas id="canvas" width="300" height="400"></canvas>
<script>
function draw(){
var canvas=document.getElementById("canvas");
if(canvas==null){
return false;
}
var context=canvas.getContext("2d");
context.fillStyle="#eeeeee";
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>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 新手 canvas

相关文章推荐

新的分享

章节导航