html5之canvas

canvas是html5出现的新标签，主要用来画图，看见网上能用来实现各种图形，所以感觉很好玩，就学习了一下。
canvas绘制图形有两种方法：

1. context.fill() //填充

2. context.stroke() //绘制边框

在绘制图形前要设置好图形样式，也有两种方法：

1. context.fillStyle() //填充的样式

2. context.strokeStyle() //边框样式

下面就开始绘制各种图形

1. 绘制矩形
   context.fillRect(x,y,width,height)
   context.fillRect(x,y,width,height)
   x : 矩形的起点横坐标
   y : 矩形的起点纵坐标
   width : 矩形的宽度

function draw(){
        var canvas = document.getElementById('chen'),
            context = canvas.getContext('2d');
            canvas.width = 100;
            canvas.height = 100;
            context.fillStyle = 'red';        //发现要先设置填充颜色
            context.fillRect(0, 0, 100 ,100);
            context.strokeRect(0, 100, 100 ,100);

    }
 draw();

1. 圆
   context.arc(x,y,radius,starAngle,endAngle, anticlockwose)
   radius : 半径

关键字：JavaScript, css, html5, canvas

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！