canvas结合js画字_1

来源：互联网发布：超级基因优化液怎么样编辑：程序博客网时间：2024/04/28 09:41

上一篇文章已经讲解了一下canvas的常用API，所以本章不再重复一遍，首先，我们先把页面做出来：

<!doctype html>

<html>

<head>

<title>无标题文档</title>

canvas{

display:block;

margin:0pxauto;

}

</style>

</head>

<body>

<canvasid="canvas">

你的浏览器不支持canvas，请更新浏览器

</canvas>

<scriptsrc="canvas.js" type="text/javascript"></script>

</body>

</html>

现在运行代码是看不到任何效果的，因为我们的canvas并没有设置大小，或者其他可见属性，所以，先用js设置canvas的大小

var canvasWidth=800;

var canvasHeight=canvasWidth;

然后获取到canvas

varcanvas=document.getElementById("canvas");

varcontext=canvas.getContext("2d");

canvas.width=canvasWidth;

canvas.height=canvasHeight;

那么这个时候，我们就可以画边框了，利用上一篇文章的API，绘制边框

function drawGrid(){

context.save();

/*画边框*/

context.strokeStyle="rgb(230,1,9)";

context.beginPath();

context.moveTo(3,3);

context.lineTo(canvasWidth-3,3);

context.lineTo(canvasWidth-3,canvasHeight-3);

context.lineTo(3,canvasHeight-3);

context.closePath();

context.lineWidth=6;

context.stroke();

context.restore();

}

我们看到的结果，就是这样的：

然后，再画一个米字格出来：

/*画米字格*/

context.beginPath();

context.moveTo(0,0);

context.lineTo(canvasWidth,canvasHeight);

context.moveTo(canvasWidth,0);

context.lineTo(0,canvasHeight);

context.moveTo(canvasWidth/2,0);

context.lineTo(canvasWidth/2,canvasHeight);

context.moveTo(0,canvasHeight/2);

context.lineTo(canvasWidth,canvasHeight/2);

context.lineWidth=1;

context.stroke();

把这段代码，也放到drawGrid函数中，调用函数，会看到一个米字格

接着，我们看看canvas与鼠标的四个事件：

canvas.onmousedown=function(e){ //按下

e.preventDefault(); //阻止默认的事件响应

}

canvas.onmouseup=function(e){ //抬起

e.preventDefault();

}

canvas.onmouseout=function(e){ //出了区域

e.preventDefault();

}

canvas.onmousemove=function(e){ //移动

e.preventDefault();

}

这四个事件都是在canvas中才触发的，所以，当我们在canvas中点击的时候，是可以获取到点击的坐标轴的，但是，我们发现，我们获取到的坐标轴，并不是canvas的坐标轴，而是windows的坐标轴，那么这里，我们需要转换一下：

function windowToCanvas(x,y){

varbbox=canvas.getBoundingClientRect(); //获取canvas盒子

return{x:Math.round(x-bbox.left),y:Math.round(y-bbox.top)}; //结果为浮点型，转换一下

}

那么这个时候，我们得到的就是canvas的坐标了，可以尝试一下：

canvas.onmousedown=function(e){ //按下

e.preventDefault(); //阻止默认的事件响应

varLoc=windowToCanvas(e.clientX,e.clientY);

alert(Loc.x+”,”+Loc.y);

}

我们发现，弹出了正确的坐标位置，那么，这个时候，就可以开始绘制了，其实绘制原理很简单，就是先获取点击时候的坐标位置，然后在移动的时候不断获取新的位置，然后连接两点，就可以得到一条直线了。

首先，定义两个变量

var isMouseDown=false; //检测鼠标是否按下

var lastLoc={x:0,y:0}; //鼠标点击时候的位置

在事件中修改：

canvas.onmousedown=function(e){ //按下

e.preventDefault(); //阻止默认的事件响应

isMouseDown=true;

lastLoc=windowToCanvas(e.clientX,e.clientY);

}

canvas.onmouseup=function(e){ //抬起

e.preventDefault();

isMouseDown=false;

}

canvas.onmouseout=function(e){ //出了区域

e.preventDefault();

isMouseDown=false;

}

canvas.onmousemove=function(e){ //移动

e.preventDefault();

if(isMouseDown){ //只有当isMouseDown为true时，才绘制

varcurLoc=windowToCanvas(e.clientX,e.clientY);

//draw

context.beginPath();

context.moveTo(lastLoc.x,lastLoc.y);

context.lineTo(curLoc.x,curLoc.y);

context.strokeStyle="black";

context.stroke();

lastLoc=curLoc;

}

那么现在，整个程序就完毕了，但是，还是有一些小问题的，就是画出来的文字太难看，线条有问题，颜色没有改变，那么这些问题，我们在下篇文章中解决。

注：参考知识点：慕课网canvas应用

0 0