Canvas 交互_框架

2017年12月28日

canvas 是一张画布，仅有一个DOM元素，浏览器没有内置多余的API，所有的交互需要开发直接实现。

规则的几何形状，如矩形、圆形等，可通过简单的数学计算获得。

这是用 canvas 做的一个关系网络图，鼠标可以自由拖动节点。这个场景下交互很简单，鼠标点击画布，在事件中获取X,Y坐标，然后计算每一个节点，看是否落在这个节点的半径内。如果是，则标记为选中了。

然而，不规则图形会大大加大计算复杂度，如涉及贝塞尔曲线、旋转等。

可使用 “包围盒” 的方式，将不规则图形简单化

把复杂路径简单化，再次回归到方形、圆形等规则图形上去。

但如果你需要的是一种非常精准无误差的选取方式，那这种包围盒方式就不适用了，下面是两种 canvas 精确选取方式：

需额外新增一张仅用来存信息的canvas（不插入html里面）

当在正常的canvas上绘制图形时，同时在那张隐式的canvas中也绘制一遍，并把图形的索引值作为颜色值来绘制图形

ctxgetImageData(x,y,width,height);

ImageData 对象

R - 红色 (0-255)

G - 绿色 (0-255)

B - 蓝色 (0-255)

A - alpha 通道 (0-255)

重走一遍绘制流程，但不真正的绘制出来（不调用stroke 和 fill ）图形），而只调用 isPointInPath()方法判断点是否在图形中，如果在则终止。

MDN - getBoundingClientRect

没报错啊？？？

你是不是把JavaScript代码写到canvas标签前面了，如果写在前面要这样写，如下，写在canvas标签的后面就无所谓了

<!DOCTYPE html>

<html>

<head>

<title>在JS中获取canvas，然后设置宽度，怎么会出现这种情况[第一个百度提问]</title>

windowonload = function(){

var myCanvas = documentquerySelector('rain');

var w = windowinnerWidth;

myCanvaswidth = w;

//consolelog(windowinnerWidth);

}

</script>

</head>

<body>

</body>

</html>

方法只有一个：

通过canvas的方式，在画布上画图

步骤：

1、定义一个canvas

2、获取canvas，然后通过画图

示例：canvas 元素来显示一个红色的矩形

<canvas id="myCanvas"></canvas>//定义一个canvas

var canvas=documentgetElementById('myCanvas');//获取canvas

var ctx=canvasgetContext('2d');

ctxfillStyle='#FF0000'; //图形填充色

ctxfillRect(0,0,80,100); //绘制一个红色矩形

</script>

以下程序实现了在canvas上画红色的圆，圆心为鼠标所在位置，其中圆的位置随着鼠标位置的移动而移动，js代码中mousePos(e)方法用于获取鼠标在整个页面的坐标，getCanvasPos(canvas,e)方法用于获取鼠标在canvas上的坐标；canvas以其左上角为起点，并设为(0,0)，因此当页面包含其他元素的时候，两者坐标不一致，不过在本例中两者坐标是一致的，因为页面只包含一个canvas元素：

html代码如下：

[html] view plain copy

<html>

<body>

Your browser does not support the canvas element

</canvas>

</script>

</div>

</body>

</html>

其中abcjs文件中的代码如下：

[javascript] view plain copy

function mousePos(e)

{//获取鼠标所在位置的坐标，相对于整个页面

var x,y;

var e = e||windowevent;

return {

x:eclientX+documentbodyscrollLeft + documentdocumentElementscrollLeft,

y:eclientY+documentbodyscrollTop + documentdocumentElementscrollTop

};

}

function getCanvasPos(canvas,e)

{//获取鼠标在canvas上的坐标

var rect = canvasgetBoundingClientRect();

return {

x: eclientX - rectleft (canvaswidth / rectwidth),

y: eclientY - recttop (canvasheight / rectheight)

};

}

function draw(e)

{

var c=documentgetElementById("myCanvas");

var cxt=cgetContext("2d");

cxtclearRect(0,0,cwidth,cheight);

cxtfillStyle="#FF0000";

cxtbeginPath();

//cxtarc(mousePos(e)x,mousePos(e)y,15,0,MathPI2,true);

cxtarc(getCanvasPos(c,e)x,getCanvasPos(c,e)y,15,0,MathPI2,true);

cxtclosePath();

cxtfill();

}

以上就是关于Canvas 交互全部的内容，包括:Canvas 交互、在JS中获取canvas，然后设置宽度，怎么会出现这种情况[第一个百度提问]、Javascript如何在网页上实现画图功能等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/10077553.html

Canvas 交互

发表评论

评论列表（0条）