当前位置：网站首页 / web前端 / 正文

AY H5笔记6

时间：2019年03月14日 | 作者 : aaronyang | 分类 : web前端 | 浏览: 1563次 | 评论 0 人

====================www.ayjs.net 杨洋 wpfui.com ayui ay aaronyang=======请不要转载谢谢了。=========

从这章开始，AY将使用HBuilder开发

下载地址：http://www.dcloud.io/hbuilderx.html

绘图 canvas

有点类似wpf的drawingcontext

可以设置宽高属性，在h5中叫CanvasRenderContext2D

获得后，你就可以画图了。

下面画个矩形

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>标题</title>

</head>
<body>
  <canvas id="mc" width="400" height="400">
  </canvas>
  <script type="text/javascript">
      var canvas = document.getElementById("mc");
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "#F00";
      ctx.fillRect(30,40,80,100);
  </script>
</body>
</html>

画图，都是用js去做的。只要上面是canvas的DOM对象。

东西好多，具体参考：查看

几何图形

fillRect(double x,double y,double width,double height)矩形

strokeRect(double x,double y,double width,double height)矩形边框

其他形状暂无

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>AY标题</title>

</head>
<body>
  <canvas id="mc" width="400" height="400" style="border:1px solid black">
  </canvas>
  <script type="text/javascript">
      var canvas = document.getElementById("mc");
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "#F00";
      ctx.fillRect(30, 40, 80, 40);
      ctx.strokeStyle = "#00f";
      ctx.lineWidth = 16;
      ctx.strokeRect(30, 100, 100, 100);
      ctx.strokeStyle = "#0ff";
      ctx.lineJoin = "round";
      ctx.strokeRect(80, 140, 100, 100);
      ctx.strokeStyle = "#8389E0";
      ctx.lineJoin = "bevel";
      ctx.strokeRect(120, 180, 150, 100);
  </script>
</body>
</html>

通过设置lineJoin设置拐点的方式，矩形，圆角，切角

点线模式

设置虚线啥的，类似wpf的line的StrokeDashArray="4 4"

[2,3]长2实线条，3的空白间隔,以此循环.

[2,3,1]长2实线条，3的空白间隔,然后1的实现，2的空格

[1,2,3,4]就是实线空白线条交替的。

属性 lineDashOffset代表第一个点减去他的值，然后替换为第一个点的值

比如lineDashOffset=1,LineDash=[2,3] 实2白3，第一个是2，然后减去lineDashOffset等于1，所以只有1的实线，然后3的空白，然后2的实线，以此类推

比如lineDashOffset=3,lineDash=[5,3,1,2] 实5白3实1白2，第一个是5，然后减去lineDashOffset等于2，所以只有2的实线，然后3的空白，然后1的实线。2的空白，以此类推

 <script type="text/javascript">
      var canvas = document.getElementById("mc");
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "#F00";
      ctx.fillRect(30, 40, 80, 40);
      ctx.strokeStyle = "#00f";
      ctx.lineWidth = 16;
      ctx.strokeRect(30, 100, 100, 100);
      ctx.strokeStyle = "#eeaaff";
      ctx.lineJoin = "round";
      var li = [3.0, 5.0];
      ctx.setLineDash(li);
      ctx.lineDashOffset = 2;
      ctx.strokeRect(150, 100, 170, 250);

  </script>

绘制字符串

textAlign水平对齐的值：start end right left center

textBaseline是垂直对齐

  <script type="text/javascript">
      var canvas = document.getElementById("mc");
      var ctx = canvas.getContext("2d");

      ctx.fillStyle = "#01aabb";
      ctx.font = "italic 40px 隶书";
      ctx.textBaseline = "top";
      ctx.fillText("超级C#,后台开发", 0, 0);

      ctx.strokeStyle = "#007ACC";
      ctx.font = "bold 45px 黑体";
      ctx.fillText("超级C#,WPF开发", 0, 60);
  </script>

如果换成strokeText

设置阴影

类似wpf的DropShadowEffect

在h5中用法：

shadowBlur:阴影的模糊度

shadowColor颜色，shadowOffsetX阴影x方向的偏移，shadowOffsetY 在y轴方向的偏移

开始使用HBuilderX,h5的提示和流畅真厉害，右侧浏览器自动就能看到效果了。

路径

绘制任意图形

beginPath开始定义路径，然后调用各种方法添加子路径

closePath关闭路径，然后fill()或者stroke()来填充路径或者绘制路径边框

看下常用的

添加弧，x和y为圆心，radius为半径，startAngle角度开始，到endAngle结束。弧度为单位的。

arc(double x,double y,double radius,double startAngle,endRngle,boolean counterclockwise)

向Canvas的当前路径上添加一段弧。

arcTo(double x1,double y1,double x2,double y2.double radius)

向Canvas的当前路径上添加一段贝塞尔曲线

bezierCurveTo(double cpX1,double cpY1,double cpX2,double cpY2,double x,double y)

线段

lineTo(double x,double y)从结束点连接到x,y对应点

点移动,结束点移动到x,y位置

moveTo(double x,double y)

向Canvas的当前路径上添加一段二次曲线

quadraticCurveTo(double cpX,double cpY,double x,double y)

向Canvas的当前路径上添加一个矩形

rect(double x,double y,double width,double height)

接下来我们绘制15个圆形

		<script type="text/javascript">
			var canvas = document.getElementById("mc");
			var ctx = canvas.getContext("2d");
			for (var i = 0; i < 15; i++) {
				ctx.beginPath();
				ctx.arc(i*25,i*25,(i+1)*8,0,Math.PI*2,true);
				ctx.closePath();
				ctx.fillStyle='rgba(40,142,0,'+(15-i)*0.05+')';
				ctx.fill();
			}
		</script>

前面2个参数是位置，第3个是半径，后面0是起始弧度，后面2pi就是360度，就是一圈，就是一个圆，是否逆时针

接下来讲解arcto 有两个坐标

假设当前点是x0,y0, 从 x1,x2 到x0,y0一条直线，然后x2,y2到x0,y0一条直线，然后半径为指定的，画一个弧，这个弧是与两条直线相切的。

画个圆角矩形

思路，绿色箭头开始画，一个箭头一个方法

ctx.beginPath();

ctx.moveTo(x1+radius,y1);

ctx.lineTo(x1+width-radius,y1);

然后画拐弯arcTo需要2个点，明显4个arcTo的第一个参数的点就是矩形的4个顶点，第二个参数的点就是目的地切点

function roundRectangle(ctx, x1, y1, width, height, radius) {
				ctx.beginPath();
				ctx.moveTo(x1 + radius, y1);
				ctx.lineTo(x1 + width - radius, y1);
				ctx.arcTo(x1+width,y1,x1+width,y1+radius,radius);
				ctx.lineTo(x1+width,y1+height-radius);
				ctx.arcTo(x1+width,y1+height,x1+width-radius,y1+height,radius);
				ctx.lineTo(x1+radius,y1+height);
				ctx.arcTo(x1,y1+height,x1,y1+height-radius,radius);
				ctx.lineTo(x1,y1+radius);
				ctx.arcTo(x1,y1,x1+radius,y1,radius);
				ctx.closePath();
			}
			var canvas = document.getElementById("mc");
			var ctx = canvas.getContext("2d");
			ctx.lineWidth=5;
			ctx.strokeStyle="#41A863";
			roundRectangle(ctx,10,10,120,80,20);
			ctx.stroke();