Home > Developer > Web Develop
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "UTF-8"> <title>Canvas</title> <Scripttype= "Text/javascript"src=".. /js/jquery.js "></Script> <styletype= "Text/css">#canvas{width:7rem;margin:. 25rem 0 0 1.5rem;Border:1px solid Black;Display:Block; } </style></Head><Body> <CanvasID= "Canvas"width= "+"Height= "All"></Canvas></Body></HTML><Scripttype= "Text/javascript"> /** * REM Layout initialization*/ $('HTML'). CSS ('font-size', $ (window). Width ()/( ten); /** Get canvas canvas * Get canvas drawing context*/ varCanvas= $('#canvas')[0]; varCXT=Canvas.getcontext ('2d'); varBalls= []; /** * Event Interaction, click event for example * ISPOINTINPATH (horizontal, ordinate)*/ for(varI= 0; I< Ten; I++){ var Ball={x:math.random ()*Canvas.width, Y:math.random ()*Canvas.height, R:math.random ()* - + -} Balls[i]=Ball ; } draw (); $("#canvas"). Click (function(){ //standard get mouse click coordinate formula relative to canvas canvas varx=Event.pagex-Canvas.getboundingclientrect (). Left; vary=Event.pagey-Canvas.getboundingclientrect (). Top; for(varI= 0; I<balls.length; I++) {Cxt.beginpath (); Cxt.arc (Balls[i]. X, Balls[i]. Y, Balls[i]. R,0, Math.PI*2); if(Cxt.ispointinpath (x, y)) {Cxt.fillstyle= "Red"; Cxt.fill (); } } }); functionDraw () {Cxt.fillstyle= "Blue"; for(varI= 0; I<balls.length; I++) {Cxt.beginpath (); Cxt.arc (Balls[i]. X, Balls[i]. Y, Balls[i]. R,0, Math.PI*2); Cxt.fill (); } }</Script>
HTML5 Canvas (Event interaction, click events for example) Ispointinpath
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
