画一个三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画一个三角形</title>
<script type="text/javascript">
window.οnlοad=function(){
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.lineTo(10,10);
cxt.stroke();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3">Your browser does not support the canvas element</canvas>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/6452c872e5ad131f628bb7f49495a83b.png)
画一个实心圆形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画一个圆形</title>
<script type="text/javascript">
window.οnlοad=function(){
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
cxt.fillStyle="red"; //画笔颜色为红色
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true); //坐标(70,18)半径为15,角度0到2*π ture为逆时针作画
cxt.closePath();
cxt.fill(); //实心圆
//cxt.stroke(); //空心圆
}
</script>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3">Your browser does not support the canvas element</canvas>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/c943e17403dc3c7a7030572b939ab838.png)
作一个颜色渐变的矩形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>颜色渐变的矩形</title>
<script type="text/javascript">
window.οnlοad=function(){
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000"); //开始于红色
grd.addColorStop(1,"#00FF00"); //结束于绿色
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50); //从(0,0)到(175,50)
}
</script>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3">Your browser does not support the canvas element</canvas>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/535fa10a46c92090611e6ec041474e8f.png)