Home > Developer > JavaScript
1<! DOCTYPE html>234<title>insert you title</title>5<meta name= ' description ' content= ' This is my page ' >6<meta name= ' keywords ' content= ' keyword1,keyword2,keyword3 ' >7<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">8<link rel= ' stylesheet ' type= ' text/css ' href= './css/index.css '/>9<script type= ' text/javascript ' src= './js/jquery-1.12.1.min.js ' ></script>Ten<style type= ' text/css ' > One Html,body,img,canvas { Amargin:0; padding:0; - } - the HTML { -height:100%; - } - + Body { -Background: #000; + } A at #can { -Background: #FFF; Display:block; MARGIN:25PX Auto; border-radius:2px; - } -</style> -<script type= ' Text/javascript ' > -$(function(){ in varcan = $ (' #can '). Get (0 ); - varOcan = Can.getcontext (' 2d ' ); to + Ocan.beginpath (); -Ocan.fillstyle =Getrandomcolor (); theOcan.rect (20, 50, 100, 100 ); * Ocan.fill (); $ Ocan.closepath ();Panax Notoginseng -Ocan.beginpath ();/*If you want to just click on the last drawing to have the effect of using the start path and closed path wrapped up, if you want to work on the entire canvas in any graphic place to click on the effect of only using a large opening and closing the path wrapped together can be*/ theOcan.fillstyle =Getrandomcolor (); + //ocan.fillrect (200, 150, 100, 100); /* Use Ocan.ispointinpath (x, y) directly in this way to determine that it is invalid, no matter where the click is invalid return false */ AOcan.rect (200, 150, 100, 100);/*If you want to use Ocan.ispointinpath (x, y) to determine that you must use 37 38 inline code, otherwise invalid*/ the Ocan.fill (); + Ocan.closepath (); - $Can.onmousedown =function(EV) { $ varEV = Window.event | |ev; - varClientX = Ev.clientx- This. offsetleft; - varClientY = Ev.clienty- This. OffsetTop; the if(Ocan.ispointinpath (ClientX, clientY) = = 1/*The method used to determine if a detection point is included in the current path, only the graph that we draw last is detected*/ -|| Ocan.ispointinpath (ClientX, clientY) = =trueWuyi|| Ocan.ispointinpath ()) {/*in different browsers for the display of Boolean values are recommended to use the last method to judge directly, because this is the Boolean value of JS in the judging mechanism (not 0 of the value, non-empty string, true is considered to be true)*/ theAlert (' Click on the graph we are drawing last ... ') ); - } Wu }; - About functionGetrandomcolor () { $ varnum = ' 0xFFFFFF '; - varLen = Math.ceil (Math.random () * parseint (num, +)). ToString (16 ); - if(Length < 6 ){ - for(vari = 0; i < 6-len.length; i++ ){ ALen + = ' 0 '; + } the } - return' # ' +Len; $ } the } ); the</script> the the<body> -<canvas id= ' can ' width= ' height= ' > detects that your browser version is too low, please upgrade your browser to get a better experience ...</canvas> in</body> the
[JavaScript Canvas Ispointinpath (x, y) determines whether a point is in the last drawing] JavaScript canvas ispointinpath (x, y) determines whether the point is one of the methods shown in the last drawing
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
