SVG特效&canvas特效

SVG特效

SVG特效&canvas特效_第1张图片

<!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>

你可能感兴趣的:(canvas,svg)