آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش کن وس 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)
Img اساس تصویر می باشد. X وy مختصات هستند تا آبجکت تصویر را قرار دهند. طول و عرض اندازه ای می باشد که شما برای تصویر می خواهید، می توانید آن را طوری که می خواهید تغییر اندازه دهید.
5 arguments
drawImage (img,x,y,width,height)
Img اساس تصویر می باشد. Crop-x و crop-y مکانی است که شما شروع به بریدن تصویر خود می کنید.
Crop-width و crop-height اندازه ای است که می خواهید طبق آن تصویر را برش بزنید.
X وy همچنان مختصاتی هستند تا آبجکت تصویر را قرار دهند. طول و عرض اندازه ای می باشد که شما برای تصویر می خواهید، می توانید آن را طوری که می خواهید تغییر اندازه دهید.
9 arguments
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>‎
  • 3305
  •    1832
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .