新标签canvas

<canvas id='canvas' width='500' height='500'>您的浏览器暂不支持HTML5的canvas元素</canvas>
<script>
   var canvas=document.getElementById('canvas'); //获取canvas元素
   var c=canvas.getContext('2d'); //绘制2d
   c.lineEidth=10; //线条宽度
   c.strokeStyle='blue'; //线条颜色
   c.moveTo('50','50'); //开始坐标点
   c.lineTo('200','50'); //绘制到坐标点
   c.lineTo('200','150'); //绘制到坐标点
   c.closePath(); //闭合线条
   c.stroke(); //开始绘制边框
   //--------------------------------------------------------------------绘制矩形
   c.beginPath(); //绘制另外一个图形
   c.strokeRect('50','50','100','150'); //绘制矩形,x坐标,y坐标,宽,高
   //--------------------------------------------------------------------绘制实心
   c.beginPath(); //绘制另外一个图形
   c.strokeStyle='red'; //线条颜色
   c.fillStyle='red'; //填充颜色
   c.rect('50','50','100','150'); //绘制矩形,x坐标,y坐标,宽,高
   c.fill(); //开始绘制实心
   //--------------------------------------------------------------------绘制实心矩形
   c.beginPath(); //绘制另外一个图形
   c.strokeStyle='red'; //线条颜色
   c.fillStyle='red'; //填充颜色
   c.fillRect('50','50','100','150'); //绘制矩形,x坐标,y坐标,宽,高
   //--------------------------------------------------------------------绘制圆,圆弧
   c.beginPath(); //绘制另外一个图形
   c.strokeStyle='red'; //线条颜色
   c.fillStyle='red'; //填充颜色
   c.arc(50,50,10,0,Math.PI); //绘制圆,圆心x,圆心y,半径,起始角度,结束角度,true/false是顺/逆时针,Math.PI是半圆乘2是圆,
   c.stroke(); //开始绘制边框
   //--------------------------------------------------------------------绘制实心圆,圆弧
   c.beginPath(); //绘制另外一个图形
   c.moveTo('250','250'); //开始坐标点
   c.arc(250,250,100,Math.PI*7/6,Math.PI*11/6); //绘制圆,圆心x,圆心y,半径,起始角度,结束角度,true/false是顺/逆时针,Math.PI是半圆乘2是圆,
   c.fill(); //开始绘制实心
   //--------------------------------------------------------------------绘制实心扇形(其实就是两个扇形)
   c.beginPath(); //绘制另外一个图形
   c.moveTo('250','250'); //开始坐标点
   c.arc(250,250,100,Math.PI*7/6,Math.PI*11/6); //绘制圆,圆心x,圆心y,半径,起始角度,结束角度,true/false是顺/逆时针,Math.PI是半圆乘2是圆,
   c.fill(); //开始绘制实心
   //--------------------------------------------------------------------绘制空心,实心文字
   c.beginPath(); //绘制另外一个图形
   c.strokeStyle='red'; //线条颜色
   c.fillStyle='red'; //填充颜色
   c.font='50px 隶书' //字体大小,字体类型
   c.strokeRext('字',20,20) //绘制空心文字,字,x坐标,y坐标
   c.fillRext('字',20,20) //绘制实心文字,字,x坐标,y坐标
   //--------------------------------------------------------------------创造线性渐变
   去我要自学网看html5视频
</script>