<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{ background:black;} #c1{ background:white;} span{ color:white;} </style> <script> window.onload = function(){ var oC = document.getElementById('c1');//获取canvas元素 var oGC = oC.getContext('2d'); //绘制环境目前只是2d环境,webgl : 3D绘图 }; </script> </head> <body> <canvas id="c1" width="400" height="400"> <span>不支持canvas浏览器</span> </canvas> <!--默认:宽300 高150--> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{ background:black;} #c1{ background:white;} span{ color:white;} </style> <script> window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); oGC.fillRect(50,50,100,100);//填充 oGC.strokeRect(50.5,50.5,100,100);//不填充,只画边框。 }; </script> </head> <body> <canvas id="c1" width="400" height="400"> <span>不支持canvas浏览器</span> </canvas> <!--默认:宽300 高150--> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{ background:black;} #c1{ background:white;} span{ color:white;} </style> <script> window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); oGC.fillStyle = 'red';//填充的颜色 oGC.strokeStyle = 'blue';//边框的颜色 oGC.lineWidth = 10; oGC.fillRect(50,50,100,100); oGC.strokeRect(50.5,50.5,100,100); }; </script> </head> <body> <canvas id="c1" width="400" height="400"> <span>不支持canvas浏览器</span> </canvas> <!--默认:宽300 高150--> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{ background:black;} #c1{ background:white;} span{ color:white;} </style> <script> window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); oGC.fillStyle = 'red'; oGC.strokeStyle = 'blue'; oGC.lineWidth = 10; oGC.lineJoin = 'bevel';//圆角 oGC.fillRect(50,50,100,100); oGC.strokeRect(50.5,50.5,100,100); }; </script> </head> <body> <canvas id="c1" width="400" height="400"> <span>不支持canvas浏览器</span> </canvas> <!--默认:宽300 高150--> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{ background:black;} #c1{ background:white;} span{ color:white;} </style> <script> window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); oGC.beginPath(); oGC.moveTo(100,100); oGC.lineTo(200,200); oGC.lineTo(300,200); oGC.closePath();//起点和终点连接起来 oGC.stroke();//画线:把点连接起来 oGC.beginPath(); oGC.moveTo(100,200); oGC.lineTo(200,300); oGC.lineTo(300,300); oGC.closePath(); oGC.fill();//把点之间的位置填充 }; </script> </head> <body> <canvas id="c1" width="400" height="400"> <span>不支持canvas浏览器</span> </canvas> <!--默认:宽300 高150--> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{ background:black;} #c1{ background:white;} span{ color:white;} </style> <script> window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); oGC.beginPath(); oGC.rect(100,100,100,100);//绘制矩形 oGC.closePath(); oGC.fill(); oGC.clearRect(0,0,oC.width,oC.height); //擦出矩形区域 }; </script> </head> <body> <canvas id="c1" width="400" height="400"> <span>不支持canvas浏览器</span> </canvas> <!--默认:宽300 高150--> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{ background:black;} #c1{ background:white;} span{ color:white;} </style> <script> window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); oGC.save();//save()和restore()之间的代码不会影响后面的 oGC.fillStyle = 'red'; oGC.beginPath(); oGC.moveTo(100,100); oGC.lineTo(200,200); oGC.lineTo(300,200); oGC.closePath(); oGC.fill(); oGC.restore(); oGC.beginPath(); oGC.moveTo(100,200); oGC.lineTo(200,300); oGC.lineTo(300,300); oGC.closePath(); oGC.fill(); }; </script> </head> <body> <canvas id="c1" width="400" height="400"> <span>不支持canvas浏览器</span> </canvas> <!--默认:宽300 高150--> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{ background:black;} #c1{ background:white;} span{ color:white;} </style> <script> window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); oGC.lineWidth = 20; oGC.lineCap = 'square';//2端点的样式 oGC.moveTo(100,100); oGC.lineTo(200,200); oGC.stroke(); }; </script> </head> <body> <canvas id="c1" width="400" height="400"> <span>不支持canvas浏览器</span> </canvas> <!--默认:宽300 高150--> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{ background:black;} #c1{ background:white;} span{ color:white;} </style> <script> window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); oC.onmousedown = function(ev){ var ev = ev || window.event; oGC.moveTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);//鼠标坐标是相对于屏幕的 document.onmousemove = function(ev){ var ev = ev || window.event; oGC.lineTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop); oGC.stroke();//画线 }; document.onmouseup = function(){ document.onmousemove = null;//取消事件 document.onmouseup = null; }; }; }; </script> </head> <body> <canvas id="c1" width="400" height="400"> <span>不支持canvas浏览器</span> </canvas> <!--默认:宽300 高150--> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{ background:black;} #c1{ background:white;} span{ color:white;} </style> <script> window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); var num = 0; oGC.fillRect(0,0,100,100); setInterval(function(){ num++; oGC.clearRect(0,0,oC.width,oC.height); oGC.fillRect(num,num,100,100);//矩形区域移动 },30); }; </script> </head> <body> <canvas id="c1" width="400" height="400"> <span>不支持canvas浏览器</span> </canvas> <!--默认:宽300 高150--> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{ background:black;} #c1{ background:white; width:300px; height:150px;} span{ color:white;} </style> <script> window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); var num = 0; oGC.fillRect(0,0,100,100); }; </script> </head> <body> <canvas id="c1"> <span>不支持canvas浏览器</span> </canvas> <!--默认:宽300 高150--> </body> </html>