zoukankan      html  css  js  c++  java
  • HTML5 Cavans(8) 图像

    $代表jquery

            window.onload = function () {
                var cancans = document.getElementById("myCanvas");
                //得到2D渲染上下文
                var context = document.getElementById("myCanvas").getContext("2d");
    
                var img = new Image();
                img.width = "500";
                img.height = "400";
                img.src = "images/canvas.png";
                $(img).load(function () {
    
                    //context.drawImage(img, 0, 0); //默认图片大小
                    //context.drawImage(img, 10, 10, 100, 100)//指定大小
                    context.shadowBlur = 20;
                    context.shadowColor = "blue";
                    //图片裁剪 
                    //参数 源图,源图原点x,y坐标,源图在原点开始的宽长,画布开始画的点x,y,宽长
                    //drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
    
                    //万花筒效果
                    //右下
                    context.translate(200, 200);
                    context.drawImage(img, 0, 0, 500, 500, 0, 0, 200, 200);
    
                    //左下
                    //先缩放,画布坐标已经改变,(-200,200)为原(200,200)位置
                    context.setTransform(1, 0, 0, 1, 0, 0);
                    context.scale(-1, 1);
                    context.translate(-200, 200);
                    context.drawImage(img, 0, 0, 500, 500, 0, 0, 200, 200);
    
                    //左上
                    //先定位,不需要重新转换位置
                    context.setTransform(1, 0, 0, 1, 0, 0);
                    context.translate(200, 200);
                    context.scale(-1, -1);
                    context.drawImage(img, 0, 0, 500, 500, 0, 0, 200, 200);
    
                    //右上
                    context.setTransform(1, 0, 0, 1, 0, 0);
                    context.translate(200, 200);
                    context.scale(1, -1);
                    context.drawImage(img, 0, 0, 500, 500, 0, 0, 200, 200);
    
                });
    
            };
  • 相关阅读:
    [LeetCode#91]Decode Ways
    [LeetCode#130]Surrounded Regions
    [LeetCode#84]Largest Rectangle in Histogram
    [LeetCode#179]Largest Number
    [LeetCode#187]Repeated DNA Sequences
    [LeetCode#200]Number of Islands
    [LeetCode#268]Missing Number
    [LeetCode#44]Wildcard Matching
    [LeetCode#128]Longest Consecutive Sequence
    1如何给devexpress的gridview控件绘制全选按钮
  • 原文地址:https://www.cnblogs.com/FlyCat/p/2580975.html
Copyright © 2011-2022 走看看