Home > Developer > Web Develop
When the user selects the check box, the application redraws the diagram and enlarges it to fit the size of the canvas.
1 <HTML>2 <Head>3 <title>Scaling Images</title>4 5 <style> 6 Body{7 background:Rgba (145, +, 0.3);8 }9 Ten #canvas{ One Margin-left:20px; A Margin-right:0; - Margin-bottom:20px; - Border:Thin Solid #aaaaaa; the cursor:crosshair; - } - - #controls{ + margin:15px; - padding:0; + } A </style> at </Head> - - <Body> - <DivID= ' Controls '> - <inputID= ' Scalecheckbox 'type= ' checkbox '/> - Scale image to canvas in </Div> - to <CanvasID= ' Canvas 'width= ' # 'Height= ' 620 '> + Canvas not supported - </Canvas> the <Scriptsrc= ' Example.js '></Script> * </Body> $ </HTML>
1 varCanvas = document.getElementById (' Canvas '),2context = Canvas.getcontext (' 2d '),3Image =NewImage (),4Scalecheckbox = document.getElementById (' Scalecheckbox '));5 6 //Functions ..... ..... ..... ..... ... .. ..........................7 8 functionDrawImage () {9Context.clearrect (0,0, canvas.width,canvas.height);Ten One if(scalecheckbox.checked) { AContext.drawimage (image, 0, 0, Canvas.width, canvas.height); - } - Else { theContext.drawimage (image, 0, 0); - } - Context.restore (); - } + - //Event handlers ..... .... ..... ..... ..... ....... ................ + AScalecheckbox.onchange =function(e) { at drawImage (); - } - - //initialization ..... ..... ..... ........................... - -IMAGE.SRC = '. /.. /shared/images/waterfall.png '; inImage.onload =function(e) { - drawImage (); to};
If the user selects the check box, the function will be drawn again when the image is scaled to the same size as the canvas. Otherwise, it draws the object directly without scaling. In this case, the function will draw the image at the (0,0) coordinates of the canvas.
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
