1、在页面中加入Canvas
在页面中加入Canvas
画一条直线
1.放置<cavas>
2.写脚本，代码如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>New Web Project</title><script>function drawDiagonal() {//取得Canvas元素及其绘图上下文var canvas=document.getElementById('diagonal');var context=canvas.getContext('2d');//用绝对坐标来创建一条路径context.beginPath();context.moveTo(70,140);context.lineTo(140,70);//将这条线绘制到canvas上context.stroke();}window.addEventListener("load",drawDiagonal,true);</script></head><body><h1>New Web Project Page</h1><canvas id="diagonal" style="border:1px solid;" width="200" height="200"></canvas></body></html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>New Web Project</title><script>function drawDiagonal() {//取得Canvas元素及其绘图上下文var canvas=document.getElementById('diagonal');var context=canvas.getContext('2d');//保存当前绘图状态context.save();//向右下方移动绘图上下文context.translate(70,140);//以原点为起点，绘制与前面相同的线段context.beginPath();context.moveTo(0,0);context.lineTo(70,-70);//将这条线绘制到canvas上context.stroke();//恢复原有的绘图状态context.restore();}window.addEventListener("load",drawDiagonal,true);</script></head><body><h1>New Web Project Page</h1><canvas id="diagonal" style="border:1px solid;" width="200" height="200"></canvas></body></html>