如何在悬停和单击时使用 html5 画布更改人体图像部分的颜色
[英]How to change the color of part of human body image using html5 canvas on hover and click
问题描述
var x = document.getElementById('body-male'); var context =x.getContext('2d'); var img = new Image(); img.onload = function() { context.drawImage(img, 0, 0,x.width,x.height); }; img.src = 'http://preview.turbosquid.com/Preview/2014/05/23__12_05_49/body_front.jpg23540994-0234-4ceb-ab8e-843eb92d1fa0Original.jpg';
<!DOCTYPE html> <html> <body> <canvas id="body-male" width="250" height="400"></canvas> </body> </html>
For Example: We have a image of human body, I want when user hover any part of body like neck, head, arm etc. The organ changes it's color to yellow and when I click over particular part it perform some action.
例如：我们有一张人体图像，我希望当用户将鼠标悬停在颈部、头部、手臂等身体的任何部位时。器官将其颜色更改为黄色，当我点击特定部位时，它会执行一些操作。 I don't know how to do this in Canvas HTML5 as I am new to this.我不知道如何在 Canvas HTML5 中执行此操作，因为我是新手。
Reason for the question:问题原因：
It is a part of my project where I want to take input from user by using human body modal.这是我项目的一部分，我想通过使用人体模态从用户那里获取输入。
For this I will need a image and need to know how to change the color of organs on hover and action perform by clicking on those organs.为此，我需要一个图像，并且需要知道如何通过点击这些器官来改变悬停和动作时器官的颜色。
2 个解决方案
解决方案1
0 2015-06-21 15:34:27
use KineticJS, a Javascript library, for the canvas manipulation使用 JavaScript 库 KineticJS 进行画布操作
check out this blogspot: http://dev.filkor.org/2013/04/14/create-an-interactive-map-using-javascript-and-html-5-canvas/查看此博客点： http : //dev.filkor.org/2013/04/14/create-an-interactive-map-using-javascript-and-html-5-canvas/
Demo: http://dev.filkor.org/RiskMap/演示： http : //dev.filkor.org/RiskMap/
解决方案2
0 2015-06-22 03:14:06
For every area you want to highlight (neck,head,arm etc.) you have to create a path (or polygon) and every time when mouse hovers over the canvas you have to: 1. detect in which area mouse is located 2. clear the canvas, 3. draw the body again and fill in the path corresponding to this area对于您想要突出显示的每个区域（颈部、头部、手臂等），您必须创建一条路径（或多边形），并且每次当鼠标悬停在画布上时，您必须： 1. 检测鼠标位于哪个区域 2.清空canvas，3.再次绘制body，填写该区域对应的路径
For reacting to mouse clicks just detect which area mouse is located in.为了对鼠标点击做出反应，只需检测鼠标所在的区域。
Here is an example .这是一个例子。 For simplicity it shows two rectangles as hot areas.为简单起见，它显示了两个矩形作为热点区域。 For your image you'll have to define your own hot areas which main part of job.对于您的图像，您必须定义自己的热点区域，这是工作的主要部分。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.