html5 canvas 小例子旋转的图片

<一>CSS部分

@charset "utf-8";
*{
    padding: 0;
    margin: 0;
    outline: none;
}
#canvas{
    position: fixed;
    background: white;
    width: 100%;
    height: 100%;
}

<二>HTML部分

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>选择界面</title>
    <link rel="stylesheet" href="css/index.css" />
    <script type="text/javascript" src="js/jQuery.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</head>
<body>
    <canvas id="canvas" width="800" height="600">
        <b>浏览器不支持时显示部分</b>
    </canvas>
</body>
</html>

<三>JS部分

$(function(){
    /*获取绘图界面和绘图环境(800, 600)*/
    var ui = $('#canvas');
    var canvas = ui[0].getContext('2d');
    /*获取图片对象*/
    var img = new Image();
    /*当图片加载完成后才能绘制图片*/
    img.onload = function(){
        var num = 0;
        setInterval(function(){
            num ++;
            num = num == 360 ? 0 : num;
            draw(num);
        }, 100);
    }
    img.src = "image/1.jpg";
    /*绘图方法*/
    function draw(num){
        /*封装canvas操作起始处*/
        canvas.save();
        canvas.clearRect(0, 0, 800, 600);
        /*原点偏移*/
        canvas.translate(250, 250);
        /*旋转 (弧度)*/
        canvas.rotate(num*Math.PI/180);
        /*原点偏移*/
        canvas.translate(-150,-150);
        /*绘制图片*/
        canvas.drawImage(img, 0, 0, 300, 300);
        /*封装canvas操作结束处*/
        canvas.restore();
    }
});

posted on 2017-02-26 22:11 被遗忘的优雅阅读(4138) 评论(0) 编辑收藏举报

html5 canvas 小例子 旋转的图片

html5 canvas 小例子旋转的图片