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

最新推荐文章于 2021-06-16 00:40:51 发布

原创最新推荐文章于 2021-06-16 00:40:51 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#web开发 #javaWeb开发 #html5 #canvas #源代码

web前端专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个使用HTML5 Canvas元素创建简单图形的应用实例。该示例通过JavaScript实现了鼠标移动时显示坐标的功能，并在画布上绘制了H和5两个图案。此教程适合初学者了解如何利用HTML5 Canvas进行基本的图形绘制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们新建一个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>