zoukankan      html  css  js  c++  java
  • HTML5_Canvas(2)

    context.drawImage(imageObj,destX,destY);

    //为某个画布贴上图片

    例子:

    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
     
        var destX = 69;
        var destY = 50;
     
        var imageObj = new Image();
        imageObj.onload = function(){
            context.drawImage(imageObj, destX, destY);
        };
        imageObj.src = "darth-vader.jpg";
    };

    context.drawImage(imageObj,destX,destY,destWidth,destHeight);

    //同上,在某个矩形框内显示图片,原始图片等比缩放
     

    context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);

    //截取原始图片的一个部分在矩形框内显示
     

    context.font=[value];

    //文字字体,例子:
    context.font = "40pt Calibri";
     

    context.fillStyle=[value];

    //文字颜色
     

    context.strokeStyle=[value];

    context.strokeText("Hello World!", x, y);

    //文字样式
     

    context.textAlign=[value];

    //文字显示在左边,中间还是右边
     

    context.textBaseline=[value];

    //文字显示在上面,中间还是下面(top, hanging, middle, alphabetic,ideographic, and bottom
     

    context.shadowOffsetX=[value];

    context.shadowOffsetY=[value];

    //增加阴影

    context.globalAlpha=[value];

    //设置透明度,从0到1

    实时了解作者更多技术文章,技术心得,请关注微信公众号“轩脉刃的刀光剑影”

    本文基于署名-非商业性使用 3.0许可协议发布,欢迎转载,演绎,但是必须保留本文的署名叶剑峰(包含链接http://www.cnblogs.com/yjf512/),且不得用于商业目的。如您有任何疑问或者授权方面的协商,请与我联系

  • 相关阅读:
    python-MongoDB 非关系型数据库
    python-爬虫-Beautifulsoup模块
    python-flask-路由匹配源码分析
    python-flask-配置文件的源码分析
    python-爬虫-selenium模块
    python-flask-请求源码流程
    python-爬虫
    iOS开发——创建你自己的Framework
    手把手教你封装下载管理器
    AFNetwork 作用和用法详解
  • 原文地址:https://www.cnblogs.com/yjf512/p/2173918.html
Copyright © 2011-2022 走看看