大佬教程收集整理的这篇文章主要介绍了绘制图形，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<!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>
以上是大佬教程为你收集整理的绘制图形全部内容，希望文章能够帮你解决绘制图形所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。