我们可以通过新的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="#1EFF00"; // 保存画布状态 ctx.save(); // 移动坐标点 ctx.translate(250, 150); // 路径开始 ctx.beginPath(); // 移动到 ctx.moveTo(150, 50); // 绘制曲线 ctx.quadraticCurveTo(50, 50, 50, 125); ctx.quadraticCurveTo(50, 200, 100, 200); ctx.quadraticCurveTo(100, 240, 60, 250); ctx.quadraticCurveTo(120, 240, 130, 200); ctx.quadraticCurveTo(250, 200, 250, 125); ctx.quadraticCurveTo(250, 50, 150, 50); // 填充路径 ctx.stroke(); // 恢复画布状态 ctx.restore(); }