مشخصات مقاله
-
3023
-
0.0
-
6361
-
0
-
0
آموزش کن وس image در HTML
بوم نقاشی: تصویر
کشیدن خط یا اشکال ساده خسته کننده می باشد، اجازه بدهید چند تصویر طراحی کنیم.
در نمایش بالا فقط از کانتکست روش drawimage() استفاده کردم. به هرحال این روش می تواند 3، 5 و یا 9 استدلال داشته باشد. من سه عملکرد دارم که عبارتند از draw dragon (کشیدن اژدها)، draw smaller dragon (کشیدن اژدهای کوچکتر) و draw dragon head (کشیدن سر اژدها) و هرکدام از آنها 3،5 و 9 استدلال مربوطه را دنبال می کنند.
Description
Overloading of drawImage()
Img اساس تصویر می باشد. X وy مختصات هستند تا آبجکت تصویر را قرار دهند.
3 arguments
drawImage (img,x,y)
drawImage (img,x,y)
Img اساس تصویر می باشد. X وy مختصات هستند تا آبجکت تصویر را قرار دهند. طول و عرض اندازه ای می باشد که شما برای تصویر می خواهید، می توانید آن را طوری که می خواهید تغییر اندازه دهید.
5 arguments
drawImage (img,x,y,width,height)
drawImage (img,x,y,width,height)
Img اساس تصویر می باشد. Crop-x و crop-y مکانی است که شما شروع به بریدن تصویر خود می کنید.
Crop-width و crop-height اندازه ای است که می خواهید طبق آن تصویر را برش بزنید.
X وy همچنان مختصاتی هستند تا آبجکت تصویر را قرار دهند. طول و عرض اندازه ای می باشد که شما برای تصویر می خواهید، می توانید آن را طوری که می خواهید تغییر اندازه دهید.
Crop-width و crop-height اندازه ای است که می خواهید طبق آن تصویر را برش بزنید.
X وy همچنان مختصاتی هستند تا آبجکت تصویر را قرار دهند. طول و عرض اندازه ای می باشد که شما برای تصویر می خواهید، می توانید آن را طوری که می خواهید تغییر اندازه دهید.
9 arguments
drawImage (img, crop_x, crop_y, crop_width, crop_height, x, y, width, height)
drawImage (img, crop_x, crop_y, crop_width, crop_height, x, y, width, height)
در اینجا کد نمایش اژدها را مشاهده می کنید.
<div> <canvas id="c5" width="600" height="300" style="border:solid 1px #000000;"></canvas> <div> <button onclick="draw_dragon();return true;">Draw Dragon</button> <button onclick="draw_smaller_dragon();return true;">Draw smaller dragon</button> <button onclick="draw_dragon_head();return true;">Draw Dragon Head</button> <button onclick="Clear_image();return true;">Erase Everything</button> </div> </div> <script> var c5 = document.getElementById("c5"); var c5_context = c5.getContext("2d"); var dragon = new Image(); dragon.src = 'images/chinese_dragon.png'; function draw_dragon() { c5_context.drawImage(dragon, 100, 5); } function draw_smaller_dragon() { c5_context.drawImage(dragon, 10, 5, 58, 100); } function draw_dragon_head() { c5_context.drawImage(dragon, 0, 19, 69, 97, 300, 100, 103, 145); } function Clear_image() { c5_context.clearRect(1, 1, 600, 300); } </script>