SVG特效&canvas特效

最新推荐文章于 2023-02-01 14:28:52 发布

weixin_34267123

最新推荐文章于 2023-02-01 14:28:52 发布

阅读量123

点赞数

原文链接：https://yq.aliyun.com/articles/20661

版权

SVG特效

这里写图片描述

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    rect {
      fill: #fff;
      stroke: #000;
    }
</style>
<svg width="960" height="500">
    <defs>
        <clipPath id="clip-upper">
            <rect width="960" height="305" x="-480" y="-305"></rect>
        </clipPath>
        <clipPath id="clip-lower">
            <rect width="960" height="195" x="-480" y="0"></rect>
        </clipPath>
    </defs>
    <g clip-path="url(#clip-upper)" transform="translate(480,305)"></g>
    <g clip-path="url(#clip-lower)" transform="translate(480,305)"></g>
</svg>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
    var width = 960,
        height = 500,
        triangleSize = 400,
        squareCount = 71,
        squareSize = 90,
        speed = .08;
    var square = d3.selectAll("g")
        .selectAll("g")
        .data(function(d, i) {
            return i ? [0, 1, 2] : [2, 0, 1];
        })
        .enter().append("g")
        .attr("transform", function(i) {
            return "rotate(" + (i * 120 + 60) + ")translate(0," + -triangleSize / Math.sqrt(12) + ")";
        })
        .selectAll("rect")
        .data(d3.range(squareCount))
        .enter().append("rect")
        .datum(function(i) {
            return i / squareCount;
        })
        .attr({
            width: squareSize,
            height: squareSize,
            x: -squareSize / 2,
            y: -squareSize / 2
        });
    d3.timer(function(elapsed) {
        square
            .attr("transform", function(t) {
                return "translate(" + (t - .5) * triangleSize + ",0)rotate(" + (t * 120 + elapsed * speed) + ")";
            });
    });
</script>

canvas特效

下载地址：http://download.csdn.net/detail/cometwo/9462522

这里写图片描述

滤镜

这里写图片描述

<!DOCTYPE html>
<html>

    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body style="background: black;">

        <canvas id="canvas" style="display:block;margin:60px auto;border:1px solid red;">
            您的浏览器尚不支持canvas
        </canvas>
        <input type="range" id="scale-range" min="0.5" max="3.0" step="0.01" value="1.0" style="display:block;margin:20px auto;width:500px" />

        <script>
            var canvas = document.getElementById("canvas")
                    var context = canvas.getContext("2d")
                    var slider = document.getElementById("scale-range")
                    var image = new Image()

                    window.onload = function(){

                        canvas.width = 900
                        canvas.height = 400

                        var scale = slider.value
                        image.src = "img-lg.jpg"
                        image.onload = function(){
                            drawImageByScale( scale )

            //                slider.onchange = function(){
            //                    scale = slider.value
            //                    drawImage( image , scale )
            //                }

                            slider.onmousemove = function(){
                                scale = slider.value
                                drawImageByScale( scale )
                            }
                        }


                    }

                    function drawImageByScale( scale ){

                        var imageWidth = 1152 * scale
                        var imageHeight = 768 * scale

                        //var sx = imageWidth / 2 - canvas.width / 2
                        //var sy = imageHeight / 2 - canvas.height / 2

                        //context.drawImage( image , sx , sy , canvas.width , canvas.height , 0 , 0 , canvas.width , canvas.height )
                        x = canvas.width /2 - imageWidth / 2
                        y = canvas.height / 2 - imageHeight / 2

                        context.clearRect( 0 , 0 , canvas.width , canvas.height )
                        context.drawImage( image , x , y , imageWidth , imageHeight )
                    }
        </script>
    </body>

</html>

weixin_34267123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SVG特效&canvas特效

SVG特效<!DOCTYPE html><meta charset="utf-8"><style> rect { fill: #fff; stroke: #000; }</style><svg width="960" hei...
复制链接

扫一扫