smile.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="smile" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById('smile')
var ctx = canvas.getContext('2d')
//画圆脸
ctx.beginPath()
ctx.arc(200,200,200,0,2*Math.PI)
ctx.fillStyle= 'yellowgreen'
ctx.fill()
ctx.closePath()
//画眼睛
ctx.beginPath()
ctx.arc(100,100,20,0,2*Math.PI)
ctx.arc(300,100,20,0,2*Math.PI)
ctx.fillStyle = 'navajowhite'
ctx.fill()
ctx.closePath()
//画嘴巴（弧线）
ctx.beginPath()
ctx.arc(200,200,120,0,Math.PI)
ctx.strokeStyle = 'navajowhite'
ctx.stroke()
ctx.closePath()
</script>
</body>
</html>
网友评论