我们可以通过新的HTML5画布(Canvas)标签添加一个画布到网页中,以下代码用于定义一个 800 x 600 大小的画布。
再通过以下 JavaScript 代码控制在画布中的绘图。
// 通过ID取画布元素 var mc = document.getElementById("MyCanvas"); var ctx = null; if(mc.getContext) { // 创建 context 对象 ctx = mc.getContext("2d"); // 设置填充颜色 ctx.strokeStyle="#FF0000"; // 路径开始 ctx.beginPath(); // 最外层圆形 ctx.arc(400, 300, 100, 0, Math.PI*2, true); // 嘴 ctx.moveTo(470, 300); ctx.arc(400, 300, 70, 0, Math.PI, false); // 左眼 ctx.moveTo(380, 280); ctx.arc(370, 280, 10, 0, Math.PI*2, true); // 右眼 ctx.moveTo(440, 280); ctx.arc(430, 280, 10, 0, Math.PI*2, true); // 绘制 ctx.stroke(); }