canvas基础—03插入图片

朱雀 2022-03-20 13:19 252阅读 0赞

### 1.插入图片 ###

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][] ###

demo.html

** drawImage(oImg,x,y,w,h) (当前图片，坐标x(正右),坐标y(正下),宽,高)**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

### 2.图片旋转  ###

图示（顺时针旋转90度）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]

图示（顺时针旋转）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3][]

这样就完成了一个类似微博的旋转功能

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 4][]

demo.html

<!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>canvas学习</title>
    <style>
    body{background: black}
    #c1{background: white}
    span{color: white}
    </style> 
    <script type="text/javascript">
        window.onload = function(){
            var aInput = document.getElementsByTagName('input')
            var oImg = document.getElementById('img1')
            var yImg = new Image()
            var iNow = 0
            yImg.onload = function() {
                draw(oImg)
            }
            yImg.src = oImg.src
            function draw(obj){
                var oC = document.createElement('canvas')
                var oGC = oC.getContext('2d')
                oC.width = obj.width
                oC.height = obj.height
                obj.parentNode.replaceChild(oC,obj)  //replaceChild(newnode,oldnode);
                oGC.drawImage(obj,0,0)
                aInput[1].onclick = function(){
                    if(iNow == 3){
                        iNow = 0
                    }else{
                        iNow++
                    }
                    toChange()
                }
                aInput[0].onclick = function(){
                    if(iNow == 0){
                        iNow = 3
                    }else{
                        iNow--
                    }
                    toChange()
                }
                function toChange(){
                    switch (iNow) {
                        case 1:
                        // 以左上角旋转 此处不好理解，图片旋转的时候，坐标轴也一起旋转了，可以参照图示进行理解
                            oC.width = obj.height
                            oC.height = obj.width
                            oGC.rotate(90*Math.PI/180)
                            oGC.drawImage(obj,0,-obj.height)
                            break;
                        case 2:
                        // 每次旋转都是重新以最初位置进行旋转，这样就可以理解为什么是旋转180度
                            oC.width = obj.width
                            oC.height = obj.height
                            oGC.rotate(180*Math.PI/180)
                            oGC.drawImage(obj,-obj.width,-obj.height)
                            break;
                        case 3:
                            oC.width = obj.height
                            oC.height = obj.width
                            oGC.rotate(270*Math.PI/180)
                            oGC.drawImage(obj,-obj.width,0)
                            break;
                        case 0:
                            oC.width = obj.width
                            oC.height = obj.height
                            oGC.rotate(0*Math.PI/180)
                            oGC.drawImage(obj,0,0)
                            break;
                    
                        default:
                            break;
                    }
                }
            }
        }
    </script>
    </head>
    <body>
        <input type="button" value="←" />
        <input type="button" value="→" />
        <div>
            <img src="../img/2.png" id="img1" />
        </div>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220320/e4cd56af49e64ffcbf82ee2aff40955e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220320/f901bd9b280c48ab8087a900f9f84679.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: /images/20220320/68a2e842793a473aaf3acb0b7a9f9089.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3]: /images/20220320/b0982cef5a9e4b028a7ac7f41469e7f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 4]: /images/20220320/6bc86e82ed644ea281364d56678a43f7.png