您的位置：首页 > Web前端 > HTML5

HTML5绘图工具canvas元素实例代码

2016-01-01 13:31 686 查看
我们新建一个html文件即可，因为html5的支持来自浏览器，和html文件的版本关系不大，只要浏览器支持HTML5即可。名字：HTML5_canvas.html

效果图：



源代码：

<!DOCTYPE html>
<html>
<head>
    <title>HTML5_canvas.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript"> 
//坐标定位
function cnvs_getCoordinates(e)
{
x=e.clientX;
y=e.clientY;
document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
}
 
function cnvs_clearCoordinates()
{
document.getElementById("xycoordinates").innerHTML="";
}
</script>
</head>
  
<body onload="loadCanvas();" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()">
<canvas id="myCanvas" width="800" height="500" style="border:1px solid #000000;">
Your browser does not support the canvas element.
</canvas>

<div id="xycoordinates"></div>

<script type="text/javascript">
function loadCanvas(){
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.moveTo(75,10);
    cxt.lineTo(150,50);
    cxt.lineTo(0,50);
    cxt.lineTo(75,10);
    
    //绘制一个H字样
    cxt.moveTo(200,100);
    cxt.lineTo(210,100);
    cxt.lineTo(210,400);
    cxt.lineTo(200,400);
    cxt.lineTo(200,100);
    
    cxt.moveTo(210,230);
    cxt.lineTo(280,230);
    cxt.lineTo(280,240);
    cxt.lineTo(210,240);
    
    cxt.moveTo(280,100);
    cxt.lineTo(290,100);
    cxt.lineTo(290,400);
    cxt.lineTo(280,400);
    cxt.lineTo(280,100);
    
    //绘制一个5字样
    cxt.moveTo(350,100);
    cxt.lineTo(500,100);
    cxt.lineTo(500,110);
    cxt.lineTo(350,110);
    cxt.lineTo(350,100);
    
    cxt.moveTo(350,110);
    cxt.lineTo(350,240);
    cxt.lineTo(360,240);
    cxt.lineTo(360,110);

    cxt.moveTo(360,230);
    cxt.lineTo(500,230);
    cxt.lineTo(500,240);
    cxt.lineTo(360,240);
    
    cxt.moveTo(500,240);
    cxt.lineTo(500,400);
    cxt.lineTo(490,400);
    cxt.lineTo(490,240);
    
    cxt.moveTo(490,400);
    cxt.lineTo(350,400);
    cxt.lineTo(350,390);
    cxt.lineTo(490,390);
    
    cxt.stroke();
}

</script>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航