canvas基础—03插入图片

最新推荐文章于 2024-05-10 10:10:22 发布

jiaojsun

最新推荐文章于 2024-05-10 10:10:22 发布

阅读量1.7k

点赞数 1

分类专栏： canvas基础

本文链接：https://blog.csdn.net/jiaojsun/article/details/87164837

版权

canvas基础专栏收录该内容

12 篇文章 1 订阅

订阅专栏

1.插入图片

demo.html

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

<!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 oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');
        var yImg = new Image()
        yImg.onload = function(){
            draw(this)
        }
        yImg.src = '../img/2.png'
        function draw(obj){
            oGC.drawImage(obj,0,0,400,200) //drawImage(oImg,x,y,w,h)  (当前图片，坐标x,坐标y,宽,高)
        }
    }
</script>
</head>
<body>

<canvas id="c1" width="400" height="400">
	<span>不支持canvas浏览器</span>
</canvas>

</body>
</html>

2.图片旋转

图示（顺时针旋转90度）

图示（顺时针旋转）

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

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>

jiaojsun

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas基础—03插入图片

1.插入图片demo.html drawImage(oImg,x,y,w,h) (当前图片，坐标x(正右),坐标y(正下),宽,高)&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;canvas学习&lt;/title&gt;&lt;
复制链接

扫一扫