Home > Developer > Web Develop
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title></Head><Body> <CanvasID= "Canvas"style= "margin:0 auto;border:1px #ddd Solid">the current browser does don't support Canvas, can replace the browser a try! </Canvas> <Script> varCanvas=document.getElementById ('Canvas'); varContext=Canvas.getcontext ('2d'); varBalls= []; Window.onload= function(){ //var canvas = document.getElementById (' canvas ');Canvas.width= 1024x768; Canvas.height= 768; if(Canvas.getcontext ('2d')){ //var context = Canvas.getcontext (' 2d '); for(varI=0; I<Ten; I++){ varAball={x:math.random ()*Canvas.width, Y:math.random ()*Canvas.height, R:math.random ()* -+ - }; Balls[i]=Aball; } draw (); Canvas.addeventlistener ("MouseMove", detect); }Else{alert ('the current browser does not support canvas, please change the viewer and try again! '); } } functionDraw (x, y) {context.clearrect (0,0, Canvas.width,canvas.height); for(varI= 0; I<Balls.length;i++) {Context.beginpath (); Context.arc (BALLS[I].X,BALLS[I].Y,BALLS[I].R,0, Math.PI*2); if(Context.ispointinpath (x, y)) Context.fillstyle= "Red"; ElseContext.fillstyle= "#058"; Context.fill (); } } functionDetect (Event) {varx=Event.clientx-Canvas.getboundingclientrect (). Left; vary=Event.clienty-Canvas.getboundingclientrect (). Top; Draw (x, y)}</Script></Body><Script> /*Summary//Judging event is not within the canvas Context.ispointinpath (x, y)*/</Script></HTML>
Canvas-a10ispointpath2.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
