HTML5 canvas画对角线

最新推荐文章于 2023-05-11 15:26:18 发布

iteye_18039

最新推荐文章于 2023-05-11 15:26:18 发布

阅读量727

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_18039/article/details/82281852

html5 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何使用HTML5的Canvas元素进行基本绘图操作，包括设置画布、使用JavaScript控制上下文对象绘制线段等。文章强调了通过上下文对象进行绘图的重要性，并解释了为何某些操作不会立即反映到页面上。

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

<html>
<head>
	<title>ExplorerCanvas Example 1</title>
	<!--[if IE]><script type="text/javascript" src="excanvas_r3/excanvas.js"></script><![endif]-->

	<style>
		body {
			background-color:white;
			margin:50px;
			text-align:center;
		}

		canvas {
			border:1px solid #444;
		}
	</style>

<script type="text/javascript">
		function load() {
			canvas = document.getElementById("cv");
			ctx = canvas.getContext("2d");
                        ctx.beginPath();
                        ctx.moveTo(70,140);
                        ctx.lineTo(140,70);
                        ctx.stroke();
		};

		
</script>


</head>
<body onload="load();">
	<canvas id="cv" width="400" height="300"></canvas>
</body>
</html>

成功了!虽然从这条简单的线段怎么也想象不到最新最美的图画，不过与以前的拉伸图像、怪异的CSS和DOM对象以及其他怪异的实现形式相比，使用基本的HTML技术在任意两点间绘制一条线段已经是非常大的进步了。从现在开始，就把那些怪异的做法永远忘掉吧。

从上面的代码清单中可以看出，canvas中所有的操作都是通过上下文对象来完成的。在以后的canvas编程中也一样，因为所有涉及视觉输出效果的功能都只能通过上下文对象而不是画布对象来使用。这种设计使canvas拥有了良好的可扩展性，基于从其中抽象出的上下文类型，canvas将来可以支持多种绘制模型。虽然本章经常提到对canvas采取什么样的操作，但读者应该明白，我们实际操作的是画布所提供的上下文对象。如前面示例演示的那样，对上下文的很多操作都不会立即反映到页面上。beginPath、moveTo以及lineTo这些函数都不会直接修改canvas的展示结果。canvas中很多用于设置样式和外观的函数也同样不会直接修改显示结果。只有当对路径应用绘制(stroke)或填充(fill)方法时，结果才会显示出来。否则，只有在显示图像、显示文本或者绘制、填充和清除矩形框的时候，canvas才会马上更新。