问题:实现一个鼠标移到圆内则北京变黄,鼠标离开圆的背景变回之前的形态的效果?
思路: 鼠标移动的事件中,获取距离context的左边和上边的距离,ev.offsetX; ev.offsetY,他们距离圆心和差开方就可以获取到圆心的距离, 只要判断点->圆心 的距离小于等于半径即可。
代码实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
body {background:black; text-align: center;}
#c1 {background:white;}
</style>
<script>
window.onload=function (){
let oC=document.getElementById('c1');
let gd=oC.getContext('2d');
let cx=400, cy=300, r=200;
//点->圆心 的距离