通过canvas画布绘制如下图形：
效果如图：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
<script type="text/javascript">
var c;
var content;
window.onload = function () {
c = document.getElementById("myCanvas");
content = c.getContext("2d");
}
function juXin() {
content.fillStyle = "blue";
content.fillRect(10,10,100,100);
}
function xieXian() {
content.moveTo(0,0);//定义线条开始坐标
content.lineTo(150,200);//定义终点坐标
content.strokeStyle = "green";
content.stroke();
}
function yuan() {
content.beginPath();
content.arc(100,100,100,0,2*Math.PI);
content.stroke();//空心
content.fill();
content.closePath();
}
function ziti() {
content.font = "30px Arial";
content.fillText("Hello World",10,50);
}
function jianBian() {
var grd = content.createLinearGradient(0,0,200,0);//直线渐变
// var grd = content.createRadialGradient(100,100,100,100,100,20);//圆渐变
grd.addColorStop(0,"yellow");
grd.addColorStop(1,"white");
content.fillStyle = grd;
content.fillRect(10,50,200,100);
}
</script>
</head>
<body>
<canvas id="myCanvas" width="200" height="200" style="border: 1px solid deeppink;" ></canvas>
<button οnclick="juXin();">矩形</button>
<button οnclick="xieXian();">画斜线</button>
<button οnclick="yuan();">画圆</button>
<button οnclick="ziti();">画字体</button>
<button οnclick="jianBian();">渐变</button>
</body>
</html><!DOCTYP
