欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Html5 Canvas介绍

程序员文章站 2022-07-05 15:41:07
1. 获取绘图上下文 var mycanvas = document.getElementById('mycanvas'); var context = mycanvas.getContext('2d'); 2. 绘图函数 注:x = positionX y= position Y w = widt ......

1. 获取绘图上下文

  var mycanvas = document.getelementbyid('mycanvas');

  var context = mycanvas.getcontext('2d');

2. 绘图函数

    注:x = positionx y= position y w = width h = height

    绘制矩形:

      strokerect(x,y,w,h); -----边框矩形

      fillrect(x,y,w,h); ----填充矩形

    清除区域:

      clearrect(x,y,w,h);

    绘制路径:

      beginpath();清楚路径列表,每次绘制新的形状之前都要调用

      moveto();开始绘制的坐标

      lineto();绘制到哪里

      closepath();关闭路径形成闭合的图形,如果不想形成闭合图形就不需要添加

      stroke();执行描边,连线!!!!!!!!!!!!

      strokestyle = '(十六进制颜色值)或(颜色英文拼写)';  设置描边颜色

      linewidth();设置描边线条的粗细

      fillstyle = '(十六进制颜色值)或(颜色英文拼写)'; 设置填充颜色

      fill(); 执行填充

    绘制弧形:

      注:弧度 = 角度 * (math.pi / 180)

      arc(x,y,radius(半径),startangle(起始弧度),endangle(终止弧度),counterclockwise(是否逆时针绘制));

      arcto(x1,y1,x2,y2,ridius(弧的半径,半径小则离切线角越近));

      Html5 Canvas介绍

    绘制2次贝塞尔曲线:

      quadraticcurveto(cpx(控制点坐标x),cpy(控制点坐标y),x(末端点x),y(末端点y));

      与moveto();的起始点配合使用。

    绘制三次贝塞尔曲线:

      beziercurveto(cpx1,cpy1,cpx2,cpy2,x,y); 有两个控制点,最后的x,y是结束点。

      与moveto();的起始点配合使用。

  clip();定义遮罩层,只能显示遮罩层之间的内容

  透明度:使用rgba();

  线性渐变色:

    var  grandient = createlineargradient(startx,starty,endx,endy) ;定义渐变区间

    grandient.addcolorstop(0(比例),"blue");

    grandient.addcolorstop(0.5(比例),"red");

    ctx.fillstyle = grandient;

    ctx.fill();

  放射渐变:

    var g = createradialgradient(x1,y1,r1,x2,y2,r2); 两个圆的相交区域为渐变区间

    g.addcolorstop();

    ……

    ctx.fillstyle = g;

    ctx.fill();

例子:绘制台球桌:

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5     <title></title>
 6     </head>
 7     <body style="text-align: center;">
 8         <canvas id="mycanvas" width="500" height="500"/>
 9     </body>
10     <script type="text/javascript">
11         var mycanvas = document.getelementbyid('mycanvas');
12         var ctx = mycanvas.getcontext('2d');
13         ctx.beginpath();
14         ctx.fillstyle = "#00ff00";
15         ctx.fillrect(0,0,500,500);
16 
17         //绘制白球
18         drawwhitetableball(50,250,ctx);
19 
20         //绘制红球组
21         drawredtableball(300,250,ctx);
22 
23         drawredtableball(335,230,ctx);
24         drawredtableball(335,270,ctx);
25 
26         drawredtableball(370,210,ctx);
27         drawredtableball(370,250,ctx);
28         drawredtableball(370,290,ctx);
29 
30         drawredtableball(405,190,ctx);
31         drawredtableball(405,230,ctx);
32         drawredtableball(405,270,ctx);
33         drawredtableball(405,310,ctx);
34 
35         function drawredtableball(positionx,positiony,ctx){
36             ctx.beginpath();
37             ctx.arc(positionx,positiony,20,0,360*math.pi/180,false);
38             var g = ctx.createradialgradient(positionx-4,positiony-4,5,positionx,positiony,20);
39             g.addcolorstop(0,"#ffffff");
40             g.addcolorstop(1,"#ff0000");
41             ctx.fillstyle = g;
42             // ctx.fillrect(positionx,positiony,positionx+20,positiony+20);
43             ctx.fill();
44         }
45 
46         function drawwhitetableball(positionx,positiony,ctx){
47             ctx.beginpath();
48             ctx.arc(positionx,positiony,20,0,360*math.pi/180,false);
49             var g = ctx.createradialgradient(positionx-4,positiony-4,5,positionx,positiony,20);
50             g.addcolorstop(0,"rgba(255,255,255,1)");
51             g.addcolorstop(1,"rgba(255,255,255,0.8)");
52             ctx.fillstyle = g;
53             ctx.fill();
54             // ctx.fillrect(positionx,positiony,positionx+20,positiony+20);
55         }
56     </script>
57 </html>

 放射渐变的理论参考这个大佬的讲解,写的很清楚:

  https://www.cnblogs.com/tianma3798/p/5895811.html