声明性css动画//canvas绘画

最新推荐文章于 2022-10-13 07:00:00 发布

chenggou9601

最新推荐文章于 2022-10-13 07:00:00 发布

阅读量140

点赞数

原文链接：https://my.oschina.net/u/3161974/blog/861398

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Declarative CSS Animation Demonstration</title>
<style>
    span{
        font-size: 48px;
        transition: text-shadow 2s ease;
        -moz-transition: text-shadow 2s ease;
        -webkit-transition: text-shadow 2s ease;
    }
    span:hover{
        text-shadow: 0px 0px 18px red;
    }
</style>
</head>
<body>
<span>Follow</span>
<span>the</span>
<span>unearthly</span>
<span>glow!</span>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Declarative CSS Animation Demonstration</title>
<!--js创建canvas-->
    <!--<script>-->
        <!--var canvas=document.createElement("canvas");-->
        <!--canvas.innerHTML="在支持canvas元素的浏览器中，该元素应该出现在这里.";-->
        <!--canvas.height=200;-->
        <!--canvas.width=200;-->
        <!--document.body.appendChild(canvas);//...或者你希望canvas去的其他任何地方-->
    <!--</script>-->

</head>
<body>
<canvas width="200" height="200" id="canvass">
    在支持canvas元素的浏览器中，该元素应该出现在这里

</canvas>
<script>
    var canvas=document.getElementById('canvass');
    var renderingContext=canvas.getContext("2d");//"2d"所请求上下文的类型
    renderingContext.fillStyle="rgb(255,0,0)";
    renderingContext.fillRect(10,10,100,50);
    renderingContext.fillStyle="rgba(0,255,0,0.5)";
    renderingContext.fillRect(50,20,100,50);//context.strokeRect(x,y,width,height);（填色）默认填充颜色是黑色。
    // x矩形左上角的 x 坐标  y矩形左上角的 y 坐标  width矩形的宽度，以像素计 height矩形的高度，以像素计
    renderingContext.clearRect(20,15,75,40);//context.clearRect(x,y,width,height);
    // x要清除的矩形左上角的 x 坐标  y要清除的矩形左上角的 y 坐标  width要清除的矩形的宽度，以像素计 height要清除的矩形的高度，以像素计
    renderingContext.strokeRect(25,25,75,40);//context.strokeRect(x,y,width,height);（不填色）。笔触的默认颜色是黑色。
    // x矩形左上角的 x 坐标  y矩形左上角的 y 坐标  width矩形的宽度，以像素计 height矩形的高度，以像素计
</script>
</body>
</html>

canvas绘制直线和多边形

var canvas=document.getElementById('canvass');
 var renderingContext=canvas.getContext("2d");//"2d"所请求上下文的类型
 renderingContext.fillStyle="rgb(255,0,0)";
renderingContext.strokeStyle="black";
 renderingContext.beginPath();
 renderingContext.moveTo(10,10);
 renderingContext.lineTo(110,10);
 renderingContext.lineTo(110,180);
 renderingContext.closePath();
 renderingContext.fill();
 renderingContext.stroke();

canvas绘制弧和圆

<script>
    var canvas=document.getElementById('canvass');
    var renderingContext=canvas.getContext("2d");//"2d"所请求上下文的类型
    for(var i=0;i<4;i+=1){
        for(var j=0;j<3;j+=1){
            renderingContext.beginPath();
            var x=25+(j*50),
                    y=25+(i*50),
                    radius=20,
                    startAngle=0,
                    endAngle=Math.PI+((Math.PI*j)/2),
                    anticlockwise=((i%2)===0)?false:true;
            renderingContext.arc(x,y,radius,startAngle,endAngle,anticlockwise);//arc(x, y, radius, startAngle, endAngle, counterclockwise)
            //x, y 描述弧的圆形的圆心的坐标。 radius   描述弧的圆形的半径。startAngle,
           // 沿着圆指定弧的开始点和结束点的一个角度。这个角度用弧度来衡量。endAngle 沿着 X 轴正半轴的三点钟方向的角度为 0，角度沿着逆时针方向而增加。
            //counterclockwise 弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历。
            if(i>1){
                renderingContext.fill();
            }else{
                renderingContext.stroke();
            }
        }
    }
</script>

转载于:https://my.oschina.net/u/3161974/blog/861398