【一天一个canvas】绘制直线（一）

最新推荐文章于 2025-08-07 21:48:39 发布

转载最新推荐文章于 2025-08-07 21:48:39 发布 · 74 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/babysay123/p/4616719.html

文章标签：

#javascript #ViewUI

学习canvas，从现在开始。

定义和用法

<canvas> 标签定义图形，比如图表和其他图像。

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

1、使用Canvas绘制直线：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.moveTo(20,30);//第一个起点
cans.lineTo(120,90);//第二个点
cans.lineTo(220,60);//第三个点（以第二个点为起点）
cans.lineWidth=3;
cans.strokeStyle = 'red';
cans.stroke();
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>