canvas(id="canvas" width="500" height="150")
View Compiled
var canvas = document.getElementById('canvas');
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();
// 无moveTo则展现完整路径
ctx.beginPath();
ctx.strokeStyle="red";
ctx.arc(175,75,50,0,Math.PI*2,true); // 绘制
//ctx.moveTo(210,75);
ctx.arc(175,75,35,0,Math.PI,false); // 口(顺时针)
//ctx.moveTo(165,65);
ctx.arc(160,65,5,0,Math.PI*2,true); // 左眼
//ctx.moveTo(195,65);
ctx.arc(190,65,5,0,Math.PI*2,true); // 右眼
ctx.stroke();
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.