Home > Developer > Web Develop
This article is just a slag written notes, to say in the code of the comments, in my opinion superficial understanding, I do not know the difference between the two better
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8" /> <title>Canvas Label Width property and CSS Width property</title> <styletype= "Text/css">. MyCanvas{Border:1px dashed Red; }#three{width:600px;Height:300px; }#four{width:400px;Height:400px; } </style> </Head> <Body> <!--<canvas> tag only two properties--width and height - <!--Setting the width height in CSS is not the same as setting the width height in the tag properties - <CanvasID= "One"class= "MyCanvas">Your browser don't support canvas</Canvas> <CanvasID= "both"class= "MyCanvas"Height= "+"width= "+">Your browser don't support canvas</Canvas> <CanvasID= "three"class= "MyCanvas">Your browser don't support canvas</Canvas> <CanvasID= "Four"class= "MyCanvas">Your browser don't support canvas</Canvas> <Script> functionCone () {//if the canvas is not assigned a high width, the canvas default aspect (or coordinate property) is 300*150 //So here is a diagonal line varC=document.getElementById (" One"); varCV=C.getcontext ('2d'); Cv.moveto (0, 0); Cv.lineto ( -, Max); Cv.stroke (); }; Cone (); functionCtwo () {//If you set width and height in the label properties, the coordinate properties of the canvas canvas itself are changed (! Important refers not to stretch canvas) //the canvas with the width height of two is 300*300 //the line drawn here should still be diagonal varC=document.getElementById (" Both"); varCV=C.getcontext ('2d'); Cv.moveto (0,0); Cv.lineto ( -, -); Cv.stroke (); } ctwo (); functionthree () {//! Setting the width height in the important CSS only sets the width of the DOM element of the canvas itself, regardless of the coordinate properties of the canvas itself //the canvas itself coordinates property is not alive in the label attribute so it should still be 300*150. //here the CSS in proportion to enlarge one times, just the coordinate itself from the visual expansion of one times, the maximum coordinates unchanged (for the declaration of 300*150) //so it's still not diagonal . varC=document.getElementById ("three"); varCV=C.getcontext ('2d'); Cv.moveto (0,0); Cv.lineto ( -, Max); Cv.stroke (); } three (); functionFour () {//if the CSS and its own coordinate properties are out of proportion (but why this is the case, not asking for trouble.) //The coordinate attribute is independent of the DOM height itself, so it should still be diagonal, but visually wrong (coordinate units of different lengths) //It should be said that the horizontal axis of the canvas is the largest or 300 but the corresponding length is 400px, the coordinate unit length is 400/300 (px), ordinate the maximum or 150 but the corresponding length is 400px, the coordinate unit length is 400/150 (px) //Take a look (100,100) and you'll know. varC=document.getElementById (" Four"); varCV=C.getcontext ('2d'); Cv.moveto (0,0); //this should still be diagonal //Cv.lineto (a); //Diagonal on the data, which should be visually perpendicular to the length of the verticalCv.lineto ( -, -); Cv.stroke (); } four (); //Personal Summary: fee that hard to do what, directly do not control the number in the CSS. JS write only to see if the label has width and height properties should be no error </Script> </Body></HTML>
Canvas Label Width property and CSS Width property
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
