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

AY H5笔记6

时间:2019年03月14日 | 作者 : aaronyang | 分类 : web前端 | 浏览: 651次 | 评论 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>

image.png

画图,都是用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设置拐点的方式,矩形,圆角,切角

image.png


点线模式

设置虚线啥的,类似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>

image.png


绘制字符串

image.png

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

image.png

image.png

textBaseline是垂直对齐

image.png

  <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>


image.png

如果换成strokeText

image.png image.png



设置阴影

类似wpf的DropShadowEffect

在h5中用法:

shadowBlur:阴影的模糊度

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


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

image.png


路径

绘制任意图形

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>

image.png

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



接下来讲解arcto 有两个坐标

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

画个圆角矩形

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

image.pngimage.png

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();

image.png

我还真默写出来了


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























推荐您阅读更多有关于“web前端,”的文章

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  查看权限

合肥科大智能常年招聘.NET,Java,Web前端,有想找想换工作的私聊我AY唯一QQ:875556003和AY交流

抖音号:wpfui,可以看到我的很多作品效果

AYUI8社区版Github地址:前往获取

作者:杨洋(AaronYang简称AY,安徽六安人)目前是个人,还没公司AY唯一QQ:875556003和AY交流

高中学历,2015年1月17日开始,兴趣学习研究WPF,目前工作繁忙,不接任何活

声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费.AY主要靠卖技术服务挣钱

不是从我处购买的ayui7源码,我不提供任何技术服务,如果你举报从哪里买的,我可以帮你转正为我的客户,并送demo

查看捐赠

AYUI7.X MVC教程 更新如下:

第一课 第二课 程序加密教程

vs2015 企业版密钥HM6NR-QXX7C-DFW2Y-8B82K-WTYJV

vs2017 企业版密钥NJVYC-BMHX2-G77MM-4XJMR-6Q8QF

标签列表