我们先看一下效果图
用canvas画连续的线段。首先要明白canvas是怎么用的，这里画直线主要用到了以下几个接口：
- ctx.
-canvas = document.getElementById(“myCanvas”) ：获取对应的CanvasRenderingContext2D对象(画笔)
- ctx = canvas.getContext(“2d”) ：getContext()指定了参数2d这里表示绘制2d图形
- ctx.beginPath()：开始绘制一个路径
- ctx.strokeStyle = “red”：确定画出路径的颜
- ctx.moveTo(a, b):绘制起点坐标，坐标为（a,b）
- ctx.lineTo(a, b)：绘制终点目标，坐标为（a，b）
- ctx.stroke()：进行整个线段的着色，这个时候线段才可见（注意必须在关闭路径前着色）
- ctx.closePath()：关闭绘制路径
更多的canvas知识可以参考网址简书 HTML5 Canvas 学习和canvas API学习
代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1"/>
<title>full-screen</title>
<script src="index.js" charset="utf-8"></script>
<style>
*{
margin:0px;
padding:0px;
cursor:crosshair;
}
#dd{
width:1300px;
height: 700px;
margin: 0 auto;
}
#myCanvas{
background-color: #c9c9c9;
}
</style>
</head>
<body>
<div id="dd">
<canvas id="myCanvas" width=1300px height="700px">
您的浏览器不支持canvas标签。
</canvas>
</div>
</body>
</html>以上是页面的html文件部分，着这里我定义个一个canvas画布，并将其设置为页面居中显示，这里要注意的是canvas的默认大小是300px*150px，如果在css中对canvas的宽和高进行限定是就会出现拉伸的情况，这里最好在定义画布的时候就限定宽和高，或者可以用js操作DOM对其宽和高进行修改。
/**
* Created by bigding on 2016/7/4.
*/
var begin = false,posi_num = 0;
var posi = new Array(); //定义位置数组
for(var i = 0; i<100 ; i++){
posi[i] = new Array(0,0);
//console.log(i);
}
window.onload= function () {
var screen = document.getElementById("myCanvas"); //获取元素
var ctx,mouseX,mouseY;
screen.onclick = function (event) {
mouseX=getMousePos(1,event); //获取当前鼠标点击的横纵位置
mouseY=getMousePos(2,event);
//console.log("X:"+mouseX+"\tY:"+mouseY+"\tnum:"+posi_num);
posi[posi_num][0] = mouseX; //将点击的位置存入数组中
posi[posi_num][1] = mouseY;
drawLine(posi_num);
posi_num++;
}
}
function getMousePos(num,event) { //获取位置信息
var e = event || window.event;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; //屏幕滚动像素
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
if(num == 1) return e.clientX;
else return e.clientY;
}
function drawLine(num){
var canvas = document.getElementById("myCanvas"); //获取元素
var ctx;
if(canvas.getContext) {
//获取对应的CanvasRenderingContext2D对象(画笔)
ctx = canvas.getContext("2d");
//开始一个新的绘制路径
ctx.beginPath();
//设置线条颜色为黑色
ctx.strokeStyle = "red";
if(num == 0){} //绘制直线线段起始坐标点
// ctx.moveTo(posi[num][0], posi[num][1]);
else{
//绘制直线线段到指定坐标点
ctx.lineTo(posi[num-1][0], posi[num-1][1]);
ctx.lineTo(posi[num][0], posi[num][1]);
ctx.lineWidth = 5;
ctx.stroke();
}
//先关闭绘制路径。注意，此时将会使用直线连接当前端点和起始端点。
//ctx.closePath();
}
}上面这段代码是用js控制canvas的部分。
- 开始部分定义了一个二维的数组用于存放已有的点的坐标位置。
- 当页面已经载入时就会调用windows.onload（这里也以用jQuery的$(document).deady来控制，更好）。下面就是获取点击屏幕是点的坐标，然后再将其打印在屏幕上。
- 获取鼠标位置用了event.clientX/enevt.clientY获取当前点击位置距离浏览器窗口的位置，再用scrollY = document.documentElement.scrollTop || document.body.scrollTop以及var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft获取纵向滚动条和横向滚动条的偏移量，并将其用于修正想相对于屏幕的距离，使其成为想对于文档最左上角的距离。
- drawLine()函数就是将当前点击的点连同之前的点画在屏幕上。
欢迎大家指正与讨论
版权声明：本文为In_computer原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。