HTML5 canvas入门：坐标理解与线条绘制-优快云博客

本文通过两个示例介绍了HTML5 canvas的基本使用。示例1讲解了HTML中的坐标系统，如何在页面上显示矩形并实时显示鼠标坐标。示例2则展示了如何在canvas上创建画布并绘制线条，强调了canvas元素的绘制必须通过JavaScript来完成。

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

画布Canvas--1

示例1：了解HTML中的坐标
示例2：创建画布并在上面画线

示例1：了解HTML中的坐标

代码

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        body
            {
                font-size:70%;
                font-family:verdana,helvetica,arial,sans-serif;
            }
    </style> 
    <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 style="margin:0px;">

    <p>把鼠标悬停在下方可以看到坐标</p>

    <div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid#c3c3c3" 
    onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()">
    </div>
<br/>
<br/>
<br/>
    <div id="xycoordinates">
    </div>
</body>
</html>

实现效果

1.在页面中显示一个矩形
2.当鼠标放在矩形内时，在矩形右边显示当前坐标
在这里插入图片描述

结构分析

涉及对象

矩形

显示当前坐标的文本

涉及函数

cnvs_getCoordinates(e)

cnvs_clearCoordinates()

逻辑步骤

1.生成一个矩形对象 ： div

2.赋予矩形对象感知鼠标的属性 : onmousemove, onmouseout

3.生成一个用于存放并显示结果的对象 : div

4.过程：移动鼠标，产生结果，存放结果，显示

代码块分析

1.生成矩形：

<div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid#c3c3c3" 
    onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()">
</div>

id,方便之后函数对对象进行操作或者读取对应的信息
onmousemove(鼠标在对象范围内移动时)，调用对应函数
onmouseout（鼠标移出对象范围时），调用对应函数

2.生成显示结果的对象

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

仅仅给了一个对象的名字，所以说对象原本就具有显示的属性，所以不需要额外操作？

鼠标在对象范围内移动时调用的函数

function cnvs_getCoordinates(e)
	{
		x=e.clientX;
       	y=e.clientY;
		document.getElementById("xycoordinates").innerHTML="Coordinates("+x+","+y+")";
	}

clientX，clientY可以直接获得鼠标位置的X，Y值
document.getElementById(“xycoordinates”).innerHTML可以直接让对象可以显示内容，并且确定内容是什么

4.鼠标移出对象范围时调用的函数

function cnvs_clearCoordinates()
{
document.getElementById("xycoordinates").innerHTML="";
}

document.getElementById(“xycoordinates”).innerHTML可以直接让对象可以显示内容，并且确定内容是什么，由于在范围外，所以可以直接定义什么都不显示

示例2：创建画布并在上面画线

代码

<!DOCTYPE HTML>
<html>
<body>
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
    Your browser does not support the canvas element.
    </canvas>

    <script type="text/javascript">
        var c=document.getElementById("myCanvas");
        var cxt=c.getContext("2d");
        cxt.moveTo(10,10);
        cxt.lineTo(150,50);
        cxt.lineTo(10,50);
        cxt.stroke();
    </script>
</body>
</html>

实现效果

在这里插入图片描述

结构分析

涉及对象

画布

涉及函数

cxt.moveTo

cxt.lineTo

cxt.stroke

逻辑步骤

1.生成一个画布canvas对象: canvas

2.画布自带可以被画的属性 : moveTo,lineTo

3.创建画布对象后自动执行script内容 : script

代码块分析

1.创建canvas

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

只需要给出id，定义形状。

2.使用script画线

<script type="text/javascript">
	var c=document.getElementById("myCanvas");
	var cxt=c.getContext("2d");
	cxt.moveTo(10,10);
	cxt.lineTo(150,50);
	cxt.lineTo(10,50);
	cxt.stroke();
</script>