Notes d'étude préliminaires de Html5 Canvas (15) - Événements de souris

Cet article complète un exemple où le protagoniste se déplace avec la souris. L'effet est le suivant :

<.>La fonction update

est la même que l'article précédent, le code est le suivant :

Ensuite, regardez

La partie initialisation de init est la même que l'exemple de l'article précédent. Le code est le suivant :

Ensuite, définissez

mousedown

, mousemove et mouseup respectivement, correspondant respectivement à l'appui, au déplacement et à la montée de la souris. Les codes sont les suivants :

Utilisez d'abord le code suivant pour obtenir les coordonnées. Le code suivant est. utilisé dans divers navigateurs :

Vérifiez ensuite si les coordonnées de la souris sont dans la plage de l'image, et si c'est le cas, obtenez le décalage des coordonnées.

var mx,my;
if(ev.layerX || ev.layerX==0){
mx = ev.layerX;
my = ev.layerY;
}else if(ev.offsetX || ev.offsetX==0){
mx = ev.offsetX;
my = ev.offsetY;
}

Si

mousedown

se trouve dans la plage de l'image, dans Ré-obtenez les coordonnées de l'image dans move, relâchez-la lorsque vous soulevez la fonction, puis enregistrez la fonction sur canvas pour compléter cet exemple / Ce qui précède est le contenu des notes d'étude préliminaires de Html5 Canvas (15) - Événements de souris Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn). !