Home > Developer > Web Develop
<HTML> <Head> </Head> <Body> <Div> <CanvasID= "_canvas"width= "1900"Height= "+" ></Canvas> </Div> <Scripttype= "Text/javascript"> varCTX=document.getElementById ("_canvas"). GetContext ("2d"); varlastposition= NULL; varC= "#ADFF2F"; varW= 5 ; varIsdown= false; functiond (x, y) {ctx.beginpath (); Ctx.strokestyle=C; Ctx.fillstyle=C; Ctx.arc (x, y, W/2, 0, Math.PI * 2);Ctx.fill (); Ctx.beginpath (); Ctx.linewidth=W; Ctx.linecap=Ctx.linejoin= "round"; if(lastposition) {Ctx.moveto (lastposition.x, LASTPOSITION.Y); Ctx.lineto (x, y); Ctx.stroke (); } lastposition= {"x": X,"y": y}; }; functionOnmousdown (Event) {Event.preventdefault (); varx=Event.clientx; vary=Event.clienty; Isdown= true; D (x, y); }; functionOnMouseMove (Event) {Event.preventdefault (); if(isdown) {varx=Event.clientx, y=Event.clienty; D (x, y); } }; functionOnMouseUp (Event) {Event.preventdefault (); if(isdown) {Isdown= false; Lastposition= NULL; } }; varCanvas=document.getElementById ("_canvas"); Canvas.addeventlistener ("MouseDown", Onmousdown,false); Canvas.addeventlistener ("MouseMove", OnMouseMove,false); Canvas.addeventlistener ("MouseUp", OnMouseUp,false); </Script> </Body></HTML>
A case of Html5 Canvas brushes
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
