在HTML画布中创建链接
可以用画布元素中呈现的文本创建html链接吗？没有内置的功能，但是如果需要，可以模拟链接的功能。您可以记住文本的位置、不同的颜色、在用户将鼠标移到该区域时为其指定不同的光标，并在用户单击文本时将其重定向到另一页。没有简单的方法。您必须在画布上绘制链接文本，然后检查鼠标点击。这是一个演示html页面：在HTML画布中创建链接,html,canvas,hyperlink,Html,Canvas,Hyperlink,可以用画布元素中呈现的文本创建html链接吗？没有内置的功能，但是如果需要，可以模拟链接的功能。您可以记住文本的位置、不同的颜色、在用户将鼠标移到该区域时为其指定不同的光标，并在用户单击文本时将其重定向到另一页。没有简单的方法。您必须在画布上绘制链接文本，然后检查鼠标点击。这是一个演示html页面： <html> <head> <script type="text/javascript"> var canvas = document.getElementByI
<html>
<head>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var ctx;
var linkText="http://stackoverflow.com";
var linkX=5;
var linkY=15;
var linkHeight=10;
var linkWidth;
var inLink = false;
// draw the balls on the canvas
function draw(){
canvas = document.getElementById("myCanvas");
// check if supported
if(canvas.getContext){
ctx=canvas.getContext("2d");
//clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
//draw the link
ctx.font='10px sans-serif';
ctx.fillStyle = "#0000ff";
ctx.fillText(linkText,linkX,linkY);
linkWidth=ctx.measureText(linkText).width;
//add mouse listeners
canvas.addEventListener("mousemove", on_mousemove, false);
canvas.addEventListener("click", on_click, false);
}
}
//check if the mouse is over the link and change cursor style
function on_mousemove (ev) {
var x, y;
// Get the mouse position relative to the canvas element.
if (ev.layerX || ev.layerX == 0) { //for firefox
x = ev.layerX;
y = ev.layerY;
}
x-=canvas.offsetLeft;
y-=canvas.offsetTop;
//is the mouse over the link?
if(x>=linkX && x <= (linkX + linkWidth) && y<=linkY && y>= (linkY-linkHeight)){
document.body.style.cursor = "pointer";
inLink=true;
}
else{
document.body.style.cursor = "";
inLink=false;
}
}
//if the link has been clicked, go to link
function on_click(e) {
if (inLink) {
window.location = linkText;
}
}
</script>
</head>
<body onload="draw()">
<center>
<canvas id="myCanvas" width="200" height="200" style="border-style:solid;border-width:1px">Canvas not supported.</canvas>
</center>
</body>
</html>
var canvas=document.getElementById（“myCanvas”）；
var-ctx；
var linkText=”http://stackoverflow.com";
var-linkX=5；
var-linkY=15；
var-linkHeight=10；
可变链接宽度；
var-inLink=false；
//在画布上画球
函数绘图（）{
canvas=document.getElementById（“myCanvas”）；
//检查是否支持
if（canvas.getContext）{
ctx=canvas.getContext（“2d”）；
//透明帆布
clearRect（0，0，canvas.width，canvas.height）；
//绘制链接
ctx.font='10px无衬线'；
ctx.fillStyle=“#0000ff”；
ctx.fillText（linkText，linkX，linkY）；
linkWidth=ctx.measureText（linkText）.width；
//添加鼠标侦听器
canvas.addEventListener（“mousemove”，在mousemove上，false）；
canvas.addEventListener（“单击”，单击时为false）；
}
}
//检查鼠标是否在链接上并更改光标样式
鼠标移动功能（ev）{
变量x，y；
//获取相对于画布元素的鼠标位置。
如果（ev.layerX | | ev.layerX==0）{//对于firefox
x=ev.rx；
y=ev.layerY；
}
x-=canvas.offsetLeft；
y-=canvas.offsetTop；
//鼠标在链接上吗？
如果（x>=linkX&&x我认为另一个简单的方法是在希望链接出现在画布上的位置放置一个div，并将链接放置在div处。您所要做的就是正确地定位和设置div的样式。此示例显示了如何将多个链接添加到HTML画布：
<!DOCTYPE html>
<!-- This page shows how to add multiple links to <canvas> (by Yakovenko Max) -->
<html>
<head>
<title>Canvas Links Example</title>
<script>
function OnLoad(){
// Get canvas
var canvas = document.getElementById("myCanvas");
// 2d context
var ctx = canvas.getContext("2d");
ctx.translate(0.5, 0.5); // * Move the canvas by 0.5px to fix blurring
// Block border
ctx.strokeStyle = "#5F7FA2";
ctx.strokeRect(50, 50, 185, 90);
// Photo
var img = new Image();
img.src = "http://www.cs.washington.edu/education/courses/csep576/05wi/projects/project4/web/artifact/liebling/average_face.gif";
img.onload = function(){
ctx.drawImage(img, 59.5, 59.5); // Use -0.5px on photos to prevent blurring caused by * fix
}
// Text
ctx.fillStyle = "#000000";
ctx.font = "15px Tahoma";
ctx.textBaseline = "top";
ctx.fillText("Username", 95, 65);
// ***** Magic starts here *****
// Links
var Links = new Array(); // Links information
var hoverLink = ""; // Href of the link which cursor points at
ctx.fillStyle = "#0000ff"; // Default blue link color
ctx.font = "15px Courier New"; // Monospace font for links
ctx.textBaseline = "top"; // Makes left top point a start point for rendering text
// Draw the link
function drawLink(x,y,href,title){
var linkTitle = title,
linkX = x,
linkY = y,
linkWidth = ctx.measureText(linkTitle).width,
linkHeight = parseInt(ctx.font); // Get lineheight out of fontsize
// Draw the link
ctx.fillText(linkTitle, linkX, linkY);
// Underline the link (you can delete this block)
ctx.beginPath();
ctx.moveTo(linkX, linkY + linkHeight);
ctx.lineTo(linkX + linkWidth, linkY + linkHeight);
ctx.lineWidth = 1;
ctx.strokeStyle = "#0000ff";
ctx.stroke();
// Add mouse listeners
canvas.addEventListener("mousemove", on_mousemove, false);
canvas.addEventListener("click", on_click, false);
// Add link params to array
Links.push(x + ";" + y + ";" + linkWidth + ";" + linkHeight + ";" + href);
}
// Link hover
function on_mousemove (ev) {
var x, y;
// Get the mouse position relative to the canvas element
if (ev.layerX || ev.layerX == 0) { // For Firefox
x = ev.layerX;
y = ev.layerY;
}
// Link hover
for (var i = Links.length - 1; i >= 0; i--) {
var params = new Array();
// Get link params back from array
params = Links[i].split(";");
var linkX = parseInt(params[0]),
linkY = parseInt(params[1]),
linkWidth = parseInt(params[2]),
linkHeight = parseInt(params[3]),
linkHref = params[4];
// Check if cursor is in the link area
if (x >= linkX && x <= (linkX + linkWidth) && y >= linkY && y <= (linkY + linkHeight)){
document.body.style.cursor = "pointer";
hoverLink = linkHref;
break;
}
else {
document.body.style.cursor = "";
hoverLink = "";
}
};
}
// Link click
function on_click(e) {
if (hoverLink){
window.open(hoverLink); // Use this to open in new tab
//window.location = hoverLink; // Use this to open in current window
}
}
// Ready for use ! You are welcome !
drawLink(95,93,"http://www.facebook.com/","Me at facebook");
drawLink(95,110,"http://plus.google.com/","Me at G+");
}
</script>
</head>
<body onload="OnLoad();">
<canvas id="myCanvas" width="450" height="250" style="border:1px solid #eee;">
Canvas is not supported in your browser ! :(
</canvas>
</body>
</html>
画布链接示例
函数OnLoad（）{
//获取画布
var canvas=document.getElementById（“myCanvas”）；
//二维上下文
var ctx=canvas.getContext（“2d”）；
ctx.translate（0.5，0.5）；//*将画布移动0.5px以修复模糊
//块边界
ctx.strokeStyle=“#5F7FA2”；
ctx.strokeRect（50,50,185,90）；
//照片
var img=新图像（）；
img.src=”http://www.cs.washington.edu/education/courses/csep576/05wi/projects/project4/web/artifact/liebling/average_face.gif";
img.onload=函数（）{
ctx.drawImage（img，59.5，59.5）；//在照片上使用-0.5px以防止*fix引起的模糊
}
//正文
ctx.fillStyle=“#000000”；
ctx.font=“15px-Tahoma”；
ctx.textb基线=“顶部”；
ctx.fillText（“用户名”，95,65）；
//******魔术从这里开始*****
//链接
var Links=new Array（）；//链接信息
var hoverLink=“；//光标指向的链接的Href
ctx.fillStyle=“#0000ff”//默认蓝色链接颜色
ctx.font=“15px Courier New”；//链接的单空格字体
ctx.textbeliness=“top”//使左顶部点成为呈现文本的起点
//绘制链接
函数drawLink（x、y、href、title）{
var linkTitle=标题，
linkX=x，
linkY=y，
linkWidth=ctx.measureText（linkTitle）.width，
linkHeight=parseInt（ctx.font）；//从fontsize中获取线宽
//绘制链接
ctx.fillText（linkTitle，linkX，linkY）；
//在链接下面划线（您可以删除此块）
ctx.beginPath（）；
ctx.moveTo（linkX，linkY+linkHeight）；
ctx.lineTo（链接X+链接宽度，链接Y+链接高度）；
ctx.lineWidth=1；
ctx.strokeStyle=“#0000ff”；
ctx.stroke（）；
//添加鼠标侦听器
canvas.addEventListener（“mousemove”，在mousemove上，false）；
canvas.addEventListener（“单击”，单击时为false）；
//将链接参数添加到数组
Links.push（x+”；“+y+”；“+linkWidth+”；“+linkHeight+”；“+href”）；
}
//链接悬停
鼠标移动功能（ev）{
变量x，y；
//获取相对于画布元素的鼠标位置
如果（ev.layerX | | ev.layerX==0）{//对于Firefox
x=ev.rx；
y=ev.layerY；
}
//链接悬停
对于（var i=Links.length-1；i>=0；i--）{
var params=新数组（）；
//从数组中获取链接参数
params=Links[i]。拆分（“；”）；
var linkX=parseInt（参数[0]），
linkY=parseInt（参数[1]），
linkWidth=parseInt（参数[2]），
linkHeight=parseInt（参数[3]），
linkHref=params[4]；
//检查光标是否在链接区域中
如果（x>=linkX&&x=linkY&&y
“我认为另一个简单的想法是将一个div放在你希望链接出现在画布上的位置，然后将链接放在div上。你所要做的就是正确地定位和设置div的样式。”-Shamaila Tahir
我个人喜欢在画布上使用链接的想法，这里是一个完整页面大小的画布示例。您可以将此示例用于很多事情，而不仅仅是画布，所以为什么不使用它呢`
<!DOCTYPE html>
<HEAD>
<style type="text/css">
html { height: 100%; width: 100%; overflow: hidden; }
body {
position: absolute;
height: 100%;
width: 100%;
overflow:hidden;
}
#contactBackground{
position: absolute;
height:100%;
width: 100%;
border: 2px solid green;
}
#contactBackground:hover{
border: 2px solid red;}
#contact{
position: absolute;
height:15%;
top: 52%;
left:70%;
width: 10%;
background-size:20%,20%;
}
#onOff{
position: absolute;
height:15%;
top: 52%;
left:20%;
width: 10%;
background-size:20%,20%;
}
#onOff:hover{border: 2px solid red;}
</style><TITLE>Kewl!! Buttons and Links with Canvas</TITLE></HEAD>
<script type="text/javascript">
window.addEventListener('load', canvas, false);
function canvas(){
var link="contact";
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
contact = document.getElementById("contact");
onOff = document.getElementById("onOff");
document.getElementById("onOff").style.visibility="visible";
switchLinks(link);
function switchLinks(isLink){
if(isLink!="contact"){
document.getElementById("contact").style.visibility="hidden";
}
if(isLink=="contact"){
document.getElementById("contact").style.visibility="visible";
}
}
onOff.addEventListener("mousedown",contactFunction, false);
function contactFunction(){
if(link=="contact"){link="";}else{link="contact";}
switchLinks(link);
}
}
</script><body>
<canvas id="canvas" width="0" height="0">Your browser does not support the HTML 5 Canvas.
</canvas>
<span id="contact" style="display:hidden">
<a href="mailto:Dude your Awesome!"><img id="contactBackground" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQP5qi1TPhjAPOfbogNgppFdc4r1LoNmr5D1n-NBfr7ll3x9VlY9w" alt="Send a message" title="Email" /></a>
</span>
<img id="onOff" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRXvh9Fej5ZhBQstjlSpQbRLx46h47KS2IO_WIfoyyrHk_essLU" style="display:hidden" />
</body></HTML>``
html{高度：100%；宽度：100%；溢出：隐藏；}
身体{
位置：绝对位置；
身高：100%；
宽度：100%；
溢出：隐藏；
}
#联系人背景{
位置：绝对位置；
身高：100%；
宽度：100%；
边框：2倍纯绿；
}
#联系人背景：悬停{
边框：2px纯红；}
#接触{
位置：绝对位置；
身高：15%；
最高：52%；
左：70%；
宽度：10%；
背景大小：20%，20%；
}
#奥诺夫{
po