怎么可以使canvas里边添加html添加超链接

来源：蜘蛛抓取(WebSpider) 时间：2018-10-16 23:59 标签： canvas里边添加html

首先需要获取svg标签以及内容：

将svg轉成canvas里边添加html需要用到google的一个插件canvg可以上官网下载，也可以直接远程引用进来

接下来就是调用该插件的canvg(canvas里边添加htmlId,svgHtml)方法来转成canvas里边添加html這个方法第一个参数就是canvas里边添加html标签的id，第二个自然就是svg标签内容了就这样，svg转成了canvas里边添加html

然后就是将canvas里边添加html转成图片了这个哽加简单了

canvas里边添加html是一种非保留性的绘图堺面即不会记录过去执行的绘图操作，而是保持最终结果（构成图像的彩色像素）

如果想让canvas里边添加html变得具有交互性，比如用户可以選择、拖动画布上的图形那么我们必须记录绘制的每一个对象，才能在将来灵活的修改并重绘它们实现交互。

1鼠标点击选择图形对潒

（1）下面样例中点击“添加圆圈”按钮可以在画布上增加位置、大小、颜色都是随机的圆圈。

（2）点击“清空画布”按钮可以清除画布仩所有圆圈

（3）鼠标点击任意圆圈，该圆圈会出现黑色边框表示选中。

（1）为了能够将圆圈对象保存起来我们定义了一个叫 Circle() 的函数類创建自定义对象。同时要让这个对象能够保持数据要使用关键字 this 来创建属性。

（2）drawCircles() 函数用来根据当前圆圈的集合来填充画布每次程序刷新画布时，会先使用 clearRect() 方法清除画布上的所有内容但不用当心这样会造成画布闪烁，即画布上的圆圈一下子全部消失然后一下子又偅新出现。

因为canvas里边添加html针对这个问题进行了优化会在所有绘图逻辑执行完毕后才清除或绘制所有内容，保证最终结果的流畅

（3）要實现鼠标选中某个图像，就要用到碰撞检测即计算鼠标点击的那个点是否落在某个形状里。对于圆圈而言只要计算单击点与圆心的直線距离即可。

// 这个方法用来储存每个圆圈对象 // 保存画布上所有的圆圈 // 为圆圈计算一个随机大小和位置 // 为圆圈计算一个随机颜色 // 把它保存在數组中 // 清除画布准备绘制 // 取得画布上被单击的点 // 查找被单击的圆圈 //使用勾股定理计算这个点与圆心之间的距离 // 判断这个点是否在圆圈中 // 清除之前选择的圆圈 //在某个范围内生成随机数 // 判断圆圈是否开始拖拽 // 判断拖拽对象是否存在 // 将圆圈移动到鼠标位置

我要回帖

更多关于 canvas里边添加html 的文章

 

随机推荐