<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" style="border:1px solid;" width="200"height="100"></canvas>
<script type="text/javascript">
varc=document.getElementById("myCanvas");
varcontext=c.getContext("2d");
context.moveto(0,0);
context.lineto(200,100);
context.stroke();
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" style="border:1px solid;" width="300"height="150"></canvas>
<script type="text/javascript">
varc=document.getElementById("myCanvas");
varcontext=c.getContext("2d");
context.fillStyle="#FF00FF";
context.fillRect(0,200,100);
context.strokeStyle="#FFFFFF";
context.strokeRect(0,100,50);
</script>
</body>
</html>
fillStyle 填充颜色
fillRect 填充颜色的范围
strokeStyle 填充颜色
strokeRect 填充轮廓的范围
stroke 轮廓范围
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" style="border:1px solid;" width="300"height="150">
</canvas>
<script type="text/javascript">
varc=document.getElementById("myCanvas");
varcontext=c.getContext("2d");
context.fillStyle="#FF00FF";
context.beginPath();
context.arc(100,75,50,Math.PI*2,true);
context.closePath();
context.fill();
</script>
</body>
</html>
beginPath 开始绘制
arc 弧形
closePath 把起点和终点用直线连接起来
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" style="border:1px solid;" width="200"height="200"></canvas>
<script type="text/javascript">
varc=document.getElementById("myCanvas");
varcontext=c.getContext("2d");
context.fillStyle="red";
context.beginPath();
context.moveto(25,25);
context.lineto(150,25);
context.lineto(25,150);
context.fill();
</script>
</body>
</html>
清空画布
<!DOCTYPE HTML>
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script type="text/javascript">
functionclearMap(){
context.clearRect(0,300,200);
}
</script>
<body>
<canvas id="myCanvas" style="border:1px solid;" width="300"height="200">
</canvas>
<script type="text/javascript">
varc=document.getElementById("myCanvas");
varcontext=c.getContext("2d");
context.strokeStyle="#FF00FF";
context.beginPath();
context.arc(200,150,-Math.PI*1/6,-Math.PI*5/6,true);
context.stroke();
</script></br>
<input name="" type="button" value="清空画布" onClick="clearMap();">
</body>
</html>
绘制二次方贝塞尔曲线
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" style="border:1px solid;" width="300"height="200"></canvas>
<script type="text/javascript">
varc=document.getElementById("myCanvas");
varcontext=c.getContext("2d");
// 下面开始绘制二次方贝塞尔曲线。
context.strokeStyle="dark";
context.beginPath();
context.moveto(0,200);
context.quadraticCurveto(75,200);
context.stroke();
context.globalCompositeOperation="source-over";
// 下面绘制的直线用于表示上面曲线的控制点和控制线,控制点坐标即两直线的交点(75,50)。
context.strokeStyle="#ff00ff";
context.beginPath();
context.moveto(75,50);
context.lineto(0,200);
context.moveto(75,50);
context.lineto(300,200);
context.stroke();
</script>
</body>
</html>
绘制三次方贝塞尔曲线
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" style="border:1px solid;" width="300"height="200"></canvas>
<script type="text/javascript">
varc=document.getElementById("myCanvas");
varcontext=c.getContext("2d");
// 下面开始绘制三次方贝塞尔曲线。
context.strokeStyle="dark";
context.beginPath();
context.moveto(0,200);
context.bezierCurveto(25,200);
context.stroke();
context.globalCompositeOperation="source-over";
// 下面绘制的直线用于表示上面曲线的控制点和控制线,控制点坐标为(25,50)和(75,50)。
context.strokeStyle="#ff00ff";
context.beginPath();
context.moveto(25,200);
context.stroke();
</script>
</body>
</html>
移动坐标空间
<!DOCTYPE HTML>
<html>
<head>
<script language="javascript">
functiondrawTop(ctx,fillStyle){
ctx.fillStyle = fillStyle;
ctx.beginPath();
ctx.arc(0,30,Math.PI,true);
ctx.closePath();
ctx.fill();
}
functiondrawgrip(ctx){
ctx.save();
ctx.fillStyle = "blue";
ctx.fillRect(-1.5,1.5,40);
ctx.beginPath();
ctx.strokeStyle="blue";
ctx.arc(-5,40,4,true);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
function draw(){
var ctx =document.getElementById('myCanvas').getContext("2d");
// 娉ㄦ剰锛氭墍鏈夌殑绉诲姩閮芥槸鍩轰簬杩欎竴涓婁笅鏂囥�
ctx.translate(80,80);
for (var i=1;i<10;i++){
ctx.save();
ctx.translate(60*i,0);
drawTop(ctx,"rgb("+(30*i)+","+(255-30*i)+",255)");
drawgrip(ctx);
ctx.restore();
}
}
window.onload=function(){
draw();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="700"height="300"></canvas>
</body>
</html>