HTML5动画----canvas基础1(绘制基本图形)

Canvas API前景 应用极为广阔,它能在网页中国创建一块矩形区域,这块区域称为画布,可以在其中绘制各种图形!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <canvas id="myCanvas" style="border:1px solid ;" width="200" height="200">
            您的浏览器不支持Canvas元素,请更新或更换您的浏览器。
        </canvas>
        <canvas id="myCanvas2" style="border:1px solid ;" width="200" height="150">
            您的浏览器不支持Canvas元素,请更新或更换您的浏览器。
        </canvas>
        <canvas id="myCanvas3" style="border:1px solid ;" width="200" height="150">
            您的浏览器不支持Canvas元素,请更新或更换您的浏览器。
        </canvas>
        <script type="text/javascript">
            var c=document.getElementById("myCanvas");
            var c2=document.getElementById("myCanvas2");
            var c3=document.getElementById("myCanvas3");
            var context=c.getContext("2d");
            var context2=c2.getContext("2d");
            var context3=c3.getContext("2d");
        //    context.fillStyle="aquamarine";//填充色
        //    context.fillRect(50,50,200,100);//x,y,w,h--填充出来的矩形
        //    context.fillText("你好",60,60,100);//填充出来的文字
        
//        if(c.getContext){//检测浏览器的支持
//            alert("您的浏览器支持Canvas!");
//        }else{
//            alert("您的浏览器不支持Canvas!");
//        }
        
        //1.绘制直线moveTo() lineTo()  strokeStyle  stroke()
        
context.moveTo(0,0);
        context.lineTo(150,150);
        context.strokeStyle="red";
        context.strokeStyle="#000000";
        context.strokeStyle="rgb(255,0,0,1)";
        context.stroke();
        
        
        //2.绘制矩形 fillStyle fillRect() 或strokeStyle  strokeRect()
        context.fillStyle="aquamarine";//填充色
        context.fillRect(50,50,200,100);//x,y,w,h--填充出来的矩形
        
        context.strokeStyle="#ffffff";//轮廓的颜色
        context.strokeRect(60,60,100,80);//绘制的轮廓矩形
        
        //3.绘制弧线(圆形)fillStyle beginPath() arc() closePath() fill()
        context.fillStyle="#FF00FF";
        context.beginPath();//开始绘制路径
        context.arc(100,100,50,0,Math.PI*2,true);//x,y,r,startAngle(弧度0),endAngle(弧度2π),anticlockwise(true为按逆时针方向绘制)
        context.closePath();//结束绘制路径
        context.fill();//填充
        
        for(var i=0;i<15;i++){
            context2.strokeStyle="#FF00FF";
            context2.beginPath();
            context2.arc(0,150,i*10,0,Math.PI*3/2,true);
//            context2.closePath();//这只需要弧线,不需要闭合的连线,因此不需要句
            context2.stroke();
        }
        
        //4.,绘制路径的方式可以自由绘制其他形状,如绘制三角形
        context3.fillStyle="red";
        context3.strokeStyle="black";
        context3.beginPath();
        context3.moveTo(50,50);
        context3.lineTo(100,50);
        context3.lineTo(50,100);
        context3.closePath();
        context3.fill();
        context3.stroke();
        
        </script>
    </body>
</html>

清空画布context.clearRect(x,y,width,height);

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            function clearMap(){
                context.clearRect(0,0,300,200);//注意,清空的是画布里的内容,并不是画布本身
            }
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="300" height="200" style="border: 1px solid;"></canvas>
        <script type="text/javascript">
            var c=document.getElementById("myCanvas");
            var context = c.getContext('2d');
            context.strokeStyle="#FF00FF";
            context.beginPath();
            context.arc(200,150,100,-Math.PI*1/6,-Math.PI*5/6,true);
            context.stroke();
        </script>
        <br/>
        <input type="button" name="" value="清空画布" οnclick="clearMap()" />
    </body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值