html 图片热点

Posted 2023-04-02

我点击1#后，怎么改变以1#为圆点半径10px的圆形区域的颜色

<canvas id="myCanvas" width="500px" height="400px;"></canvas>

document.getElementById("myCanvas").onclick = function circle(event)
x = event.clientX;
y = event.clientY;
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.clearRect(0,0 ,500,400);
context.fillStyle = "#f00";
context.beginPath();
context.arc(x,y,10,0, Math.PI*2);
context.closePath();
context.fill();
追问

运行出来，什么都没有啊？

追答

把js放到window.onload = function() ....js...中就可以了

追问

刚才那样的话会挡住1#文字，我想不画实心圆，画空心圆会不会挡住文字，如果画空心圆也挡住文字，可不可以把圆画成透明色，但是要有红色的边框，那样怎么弄

追答

context.strokeStyle = "#f00";
context.stroke();

把里面的fill两句换成这个

追问

太感谢了，可不可以加你口抠，以后有问题请教您

追答

928067181

参考技术A 热点是无法改变颜色的~因为热点就是一个画出来的东西~不是之前写好的东西~追问

反正我就是想图片某个部分可以点击，并且点击后改变改区域颜色，怎么做

追答

用canvas,但是很复杂，我觉得你搞不了~

追问

网上哪里有canvas,画空心圆的例子

追答

不好找~去搜canvas吧，能搜到不少教程

html5 图片热点area，map的用法

 今天看了一个html5在图片上面创建热点的标签，所谓图片热点就是给你一张图片然后你可以设置点击图片不同的位置进入不同的链接！如果下面是一张图片的话，里面在长方形、圆形、三角形区域都可以进入其他网页！

    

 

    下面，我们来实例介绍map，area这些标签的用法！

 

    1，制作矩形热点

    (1),shape标签表示热点的形状，有矩形（rectangle），圆形（circle），多边形（polygon）和整个图片（default）

    (2),coords是每个形状的坐标，不同形状坐标表示不同！上面矩形的坐标(x1,y1,x2,y2)，其中(x1,y1)是矩形左上角的坐标,(x2,y2)是矩形右下角的坐标

 

    2，制作圆形热点

    圆形的坐标(x,y,radius)，其中(x,y)是圆心的坐标，radius是圆的半径

 

    3，制作多边形热点（下面是三角形）

    多边形的坐标(x1,y1,x2,y2,x3,y3,...)有多少组(x,y)坐标就有几个角，也就是说，多边形每一个角的坐标都要在coords中！

    注意：

    1，coords里面的坐标是按照图片大小来的，不是按照浏览器窗口大小来的！所以图片的左上角的坐标是(0,0)，右下角是(图片的长，图片的宽)

    2，一般这种确定你想要的区域的坐标，单靠眼睛看是不可能看出来的，所以你需要借助截屏工具来确定区域的坐标！打开截屏工具，从图片的左上角开始拉到你想要的那个点，显示的长和宽就是这个点的坐标！