में लिंक बनाएं क्या कैनवास तत्व में प्रस्तुत पाठ से HTML लिंक बनाना संभव है?एचटीएमएल कैनवास
उत्तर
कोई आसान तरीका नहीं है। आपको लिंक टेक्स्ट को कैनवास पर खींचना होगा और फिर माउसक्लिक की जांच करनी होगी। यहाँ एक डेमो html पृष्ठ है:
<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>
ऐसा करने के लिए में बनाया गया है, लेकिन यदि आप चाहें तो लिंक के कार्य को अनुकरण कर सकते हैं। आप याद कर सकते हैं कि पाठ कहां है, इसे अलग-अलग रंग दें, जब उपयोगकर्ता उस क्षेत्र से अधिक उपयोगकर्ता को अलग-अलग कर्सर दें, और जब उपयोगकर्ता उस पर क्लिक करता है तो उपयोगकर्ता को किसी अन्य पृष्ठ पर रीडायरेक्ट करें।
मुझे लगता है कि एक और आसान विचार स्थान है जहाँ आप लिंक कैनवास पर दिखाई देते हैं और 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>
";" द्वारा सीमित एक स्ट्रिंग के चारों ओर गुजरने के बजाय हैश का उपयोग क्यों नहीं करें? – scottmrogowski
मैं एक सीमित स्ट्रिंग के बजाय JSON का उपयोग करूंगा, उदा। link.push ({"x": x, "y": y, "width": linkWidth, "ऊंचाई": linkHeight, "href": href}); साथ ही, ईवेंट श्रोताओं को ड्रॉलिंक के बाहर भी किया जा सकता है, क्योंकि उन्हें केवल एक बार जोड़ा जाना चाहिए। –
"मुझे लगता है एक और आसान विचार स्थान है जहाँ आप लिंक पर प्रदर्शित करना चाहते हैं पर एक div डाल करने के लिए है कैनवास और div पर अपना लिंक डालें। आपको बस सही तरीके से div को स्थिति और शैली बनाना है। " -शमाला ताहिर
मुझे व्यक्तिगत रूप से कैनवास के शीर्ष पर लिंक का उपयोग करने का विचार पसंद है और यहां एक पूर्ण पृष्ठ आकार कैनवास उदाहरण है। आप इस उदाहरण का उपयोग कई चीजों के लिए कर सकते हैं, न केवल कैनवास, इसलिए इसके साथ सहज क्यों न हों। `
<!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>``
- 1. एचटीएमएल कैनवास
- 2. एचटीएमएल कैनवास
- 3. एचटीएमएल कैनवास
- 4. एचटीएमएल 5 कैनवास और एंड्रॉइड कैनवास
- 5. एचटीएमएल कैनवास से पिक्सेल?
- 6. एचटीएमएल कैनवास - ड्राइंग
- 7. एचटीएमएल 5 कैनवास
- 8. एचटीएमएल कैनवास ट्रेसिंग
- 9. एचटीएमएल 5 कैनवास हिटस्टिंग
- 10. एचटीएमएल 5 कैनवास इरेज़र
- 11. एचटीएमएल 5 कैनवास
- 12. एचटीएमएल 5 कैनवास सीमाएं
- 13. एचटीएमएल 5 कैनवास
- 14. कैनवास/एचटीएमएल 5 रूपांतरण
- 15. एचटीएमएल 5 कैनवास
- 16. एचटीएमएल 5 कैनवास जावास्क्रिप्ट
- 17. एचटीएमएल 5 कैनवास
- 18. एचटीएमएल 5 कैनवास:
- 19. एचटीएमएल 5 कैनवास
- 20. एचटीएमएल 5 कैनवास
- 21. एक एचटीएमएल कैनवास
- 22. एचटीएमएल 5 कैनवास
- 23. एचटीएमएल 5 कैनवास तत्व
- 24. एचटीएमएल 5 कैनवास
- 25. एचटीएमएल 5 कैनवास
- 26. एचटीएमएल 5 कैनवास
- 27. जावास्क्रिप्ट और एचटीएमएल कैनवास
- 28. एचटीएमएल 5 कैनवास
- 29. एचटीएमएल 5 कैनवास मास्क
- 30. एचटीएमएल 5 कैनवास
' if (ev.layerX || ev.layerX) 'के लिए यह पंक्ति क्या है। मैं बस इसे समझ नहीं सकता। 'If (x || x)' 'if (x)' जैसा नहीं है? – xbonez
@xbonez 'ev.layerX होना चाहिए || ev.layerX == 0'। मैंने इसे सही कर दिया है। – dogbane