zoukankan      html  css  js  c++  java
  • context.drawImage绘制图片

    context.drawImage(img,x,y)  x,y图像起始坐标

    context.drawImage(img,x,y,w,h) w,h指定图像的宽度和高度

    context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh) s被复制区域  d复制后

    理解了其实挺简单的!就是不知道用用到多少?

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    function draw(id){
    var canvas = document.getElementById(id);
    var context = canvas.getContext("2d");
    context.fillStyle = "#EEEEEEf";
    context.fillRect(0,0,500,500);
    image = new Image();
    image.src = "图片地址";
    image.onload = function(){}
    }
    function drawImage(context,image){
    context.drawImage(image,100,100);
    context.draeImage(image,270,270,380,380,230,230,240,240);
    }
    </script>
    </head>
    <body onload="draw('canvas')">
    <canvas id="canvas" width="500" height="500"></canvas>
    </body>
    </html>

  • 相关阅读:
    JS 对象定义
    JavaScript HTML DOM 元素(节点)
    DOM 事件
    DOM CSS
    DOM HTML
    DOM 简介
    JS 验证
    JS 错误
    JavaScript Break 和 Continue 语句
    JS While
  • 原文地址:https://www.cnblogs.com/qiuzhimutou/p/4722879.html
Copyright © 2011-2022 走看看