html5 canvas基础(1)--路径

最新推荐文章于 2024-08-27 09:41:07 发布

weixin_33898876

最新推荐文章于 2024-08-27 09:41:07 发布

阅读量65

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/u/2001537/blog/371504

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>html5 canvas API</title>

    <script type="text/javascript">

        window.onload=function(){

            var canvas = document.getElementById('can');


            //找不到元素的处理
            if (canvas==null){
               console.info('canvas元素不存在..');
                return  false;

            }
            /**
             *  获取上下文(2d)平面图
             * @type {CanvasRenderingContext2D}
             */
            var context = canvas.getContext('2d');
            //设置填充样式
            context.fillStyle="yellow";
            //填充一个矩形，无背景色
            context.fillRect(10,10,250,250);
             //填充样式，颜色英文,rgb,十六进制数均可以
            context.fillStyle="green";
            //填充一个矩形
            context.fillRect(140,140,250,250);
            //设置图形边框的样式
            context.strokeStyle="red";
            //边框线宽
           context.lineWidth=10;
            //绘制一个矩形(x,y,w,h) 在坐标(x,y)处绘制宽和高为(w,h)的矩形
            context.strokeRect(100,100,200,200);

            //清除矩形，擦除指定区域中的图像，让其背景变为透明
           context.clearRect(100,100,200,200);
             /**
              * 绘制圆形或者圆弧
              * */
            for(var i=0;i<10;i++){

                //开始创建路径
                context.beginPath();
                /**
                 * arc有六个参数(x,y,radius,startAngle,endAngle,anticlockwise)
                 * (起点横坐标,起点纵坐标,圆形(弧)的半径,开始角度，结束角度,是否顺时针方向绘制)
                 */
                context.arc(35*i,35*i,i*6,0,Math.PI*2,true);
                //关闭路径,路径的绘制工作完成,还没开始绘制图像
                context.closePath();
                ///填充颜色
                context.fillStyle='rgba(245,0,0,0.5)';
                //填充图形
               context.fill();

            }
            /**
             * 绘制一个圆弧
             */
            context.beginPath();
            context.arc(300,300,100,90,120,true);
            context.closePath();
            context.fillStyle="pink";
            context.fill();




            var can= document.getElementById("line");
            /**
             *
             * @type {CanvasRenderingContext2D}
             */
            var ctx =can.getContext('2d');

            ctx.fillStyle='rgb(100,200,210)';

            ctx.fillRect(0,0,350,350);

            var m=0;
            var nx=100;
            var ny=100;
            var s=100;

            ctx.beginPath();
            ctx.fillStyle='rgb(200,240,210)';
            ctx.strokeStyle="rgb(0,0,123)";
            var $x=Math.sin(0);
            var $y=Math.cos(0);
            var $d=Math.PI/15*11;
            for (var i=0;i<30;i++){

                var $x=Math.sin($d*i);
                var $y=Math.cos($d*i);
                ctx.lineTo(nx+$x*s,ny+$y*s);

            }
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
        }

    </script>
</head>
<body>

  <canvas id="can" width="400" height="400" style="background-color:gray;">
您的浏览器不支持canvas！

  </canvas>

  <canvas id="line" width="400" height="400" style="background-color:salmon;">
      您的浏览器不支持canvas！

  </canvas>


</body>
</html>

复制代码