你的位置:首页 > 网页设计

[网页设计]HTML5 CANVAS学习笔记(一)


<!doctype html><html>  <head>    <meta charset="UTF-8">  </head>  <style type="text/css">    canvas{border:dashed 2px #CCC}  </style>  <script type="text/javascript">    function pageLoad(){      //获取canvas画布      var cv = document.getElementById('cv');      var context = cv.getContext('2d');      //设置原点和线条将要经过的坐标(注意,这时候,线条还没开始画)      context.moveTo(0,30);//第一个起点      context.lineTo(120,350);//第二个点      context.lineTo(220,500);//第三个点(以第二个点为起点)      context.lineTo(300,200);      //初始化线性渐变      var gnt1 = context.createLinearGradient(0,30,300,200);//线性渐变的起止坐标(可以对应线条的起始坐标)      gnt1.addColorStop(0,'red');//创建渐变的开始颜色,0表示偏移量,个人理解为直线上的相对位置,最大为1,一个渐变中可以写任意个渐变颜色      gnt1.addColorStop(1,'yellow');      //线条的宽度(注意,按照canvas的标准只能为非负数)      context.lineWidth=3;      //设置绘制线条时使用的样式,可以是颜色、渐变、图案等(这里是渐变)      context.strokeStyle = gnt1;      //开始画线      context.stroke();            //绘制一个渐变背景的长方形      var gnt2 = context.createLinearGradient(500,10,700,30);      //设置渐变的起始位置(0为起点,1为终点,可以设置多个渐变点)      gnt2.addColorStop(0,'red');      gnt2.addColorStop(0.5,'green');      gnt2.addColorStop(1,'blue');      context.fillStyle = gnt2;      context.fillRect(500,200,200,200);      //绘制一个空白背景的长方形      context.lineWidth = 1;      context.strokeStyle = 'red';      context.strokeRect(750,200,200,200);      //绘制一个圆形      context.beginPath();      //其中参数1、2:圆形的原点坐标,3:半径大小,4,绘制圆形的起始点,5:绘制圆形的终止点(0-2PI为整个圆形),5:false为顺时针,true为逆时针      context.arc(200,150,100,0,Math.PI*2,true);      context.closePath();      //绘制一个填充背景的圆形(也可以使用stroke绘制一个圆形线条)      context.fillStyle = 'green';      context.fill();      //绘制一个字体      context.font ='24pt Arial';      context.fillStyle='cornflowerblue';      context.strokeStyle='blue';      //绘制一个实心字体      context.fillText("Hello Canvas",200,300);      //绘制一个空心字体      context .strokeText('Hello Canvas',200,350);      //绘制一个描边字体      context.fillText("Hello Canvas",200,400);      context .strokeText('Hello Canvas',200,400);            //球形渐变      //createRadialGradient(x0, y0, r0, x1, y1, r1)      //起始的圆的圆心为(x0, y0)半径为r0,终了的圆的圆心为(x1, y1)半径为r1。      var gnt = context.createRadialGradient(400,200,25,405,205,50);      gnt.addColorStop(0,'red');      gnt.addColorStop(1,'#333');      context.fillStyle = gnt;      context.fillRect(360,160,80,80);          }  </script>  <body onload="pageLoad();">    <canvas id="cv" width="1345px" height="600px">无法加载canvas</canvas>  </body></html>

运行效果: