canvas 图片剪切, 旋转

SK 提示知识点:
1.上下文获取
2.定时器使用
3.图片加载后绘制
4.位移,旋转的使用及注意点
5.环境保存与还原
6.clip() 限定裁剪区域

效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="padding: 100px;">
<canvas id="canvas" width="900" height="600" style="border: 1px solid #000;"></canvas>

<script>
    //1.获取canvas和上下文
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    //2.实现矩形旋转
    var angle = 30;

    //添加image
    var image = new Image();
    image.src = 'images/hero.jpg';

    //加载图片
    image.onload = function () {

        //3.定时器
        setInterval(function () {

            //4. 清屏
            ctx.clearRect(0,0, canvas.width, canvas.height);

            //5.保存环境
            ctx.save();
            //6.开启路径
            ctx.beginPath();

            //7.位移, 确定旋转中心点 为矩形的中心
            ctx.translate(450, 300);
            //8.旋转
            ctx.rotate(angle * Math.PI/180);

            //ctx.fillRect(300, 300, 200, 100);
//        ctx.fillRect(-100, -50, 200, 100);

            //限定区域 圆心和旋转点重合
            ctx.arc(0, 0, 200, 0, 2*Math.PI);
            ctx.strokeStyle = 'yellow';
            ctx.lineWidth = 8;
            ctx.stroke();

            ctx.clip();

            //绘制图片
            ctx.drawImage(image, -250, -250);

            //9.还原环境
            ctx.restore();

            //10.累加角度
            angle++;
        },20);

    }

</script>

</body>
</html>

最后编辑于：2017.12.07 01:17:49

canvas 图片剪切, 旋转

推荐阅读更多精彩内容