Html5 Canvas开发之鼠标绘图和方块移动

来源：互联网发布：数据库链接编辑：程序博客网时间：2024/05/16 10:37

1.鼠标绘图

<!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>

2.方块移动

<!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>

3.Canvas开发注意事项 canvas画布宽高定义

<!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:600px; height:300px;}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>

此定义方式为按（默认大小）比例矢量放大缩小，如果要定义宽高应如下定义

<!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);};</script></head><body><canvas id="c1" width:600px; height:300px;><span>不支持canvas浏览器</span></canvas> <!--默认：宽300 高150--></body></html>