<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
function draw(){
var canvas = document.getElementById("canvasId");
if(canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true);
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false);
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true);
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true);
ctx.stroke();
}
}
</script>
<style>
</style>
</head>
<body onload="draw()">
<canvas id="canvasId" height="500" width="300">
</canvas>
</body>
</html>
![这里写图片描述](https://i-blog.csdnimg.cn/blog_migrate/bc0e6d221c89a5312867897c94b86f0b.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
function draw(){
var canvas = document.getElementById("canvasId");
if(canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle="red";
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.fill();
}
}
</script>
<style>
canvas{background: blue;}
</style>
</head>
<body onload="draw()">
<canvas id="canvasId" height="500" width="300">
</canvas>
</body>
</html>
![这里写图片描述](https://i-blog.csdnimg.cn/blog_migrate/1d46e2bec2f0feb74dd4b6bd82d55cf6.png)