少儿编程-canvas元素之绘制线条或路径JS编程

2020-09-16    来源:网上    编辑:少儿编程
13.5 绘制线条或路径 画布上的线条叫作路径(path)。要使用画布绘制路径,使用x坐标和y坐标设置线条应该从哪里开始到哪里结束。通过使用开始坐标和结束坐标的一个精确的组合,

  网上说Java自学需要2个月左右就能写点小东西,半年就能上手做一些东西,一年就该知道的都知道了,该会的也基本会了,易上手好找工作(这是重点?)。一年就可以去学习一下SSM框架开发或者SSH框架,就可以配合前端开发一些实战项目了。IOS(就苹果公司那个)自学3个月左右也能入门了,比起java来说,IOS相当更加容易些,主要是界面上的工作,前期先把UI控件学好,再学些网络操作就可以去做一些小型的APP了,但是IOS开发是一个比较烧钱的东西(需要苹果电脑和开发者账号),总之,现在我来估计一下:从入门到掌握需要几个月,这时可以编一些小程序,通过不断的实践和看书,1年会时一个瓶颈,独立开发软件的话有可能会找不到方向,而且会缺乏毅力去完成,不过度过这个阶段,成为熟练的大神大约需要2年以上的功力。

  13.5 绘制线条或路径

  画布上的线条叫作路径(path)。要使用画布绘制路径,使用x坐标和y坐标设置线条应该从哪里开始到哪里结束。通过使用开始坐标和结束坐标的一个精确的组合,可以在画布上绘制特定的形状。例如,如下代码展示了如何绘制图13-6所示的青绿色的X形。图13-6一个青绿色的x,使用moveTo和lineTo绘制

  在?处和?处,设置了线条的颜色和宽度。在?处,在绘制环境(已经保存为ctx)上调用beginPath,以告诉画布,我们想要开始绘制一条新的路径。在?处,用两个参数调用moveTo方法:x和y坐标。调用moveTo方法,会提起虚拟的JavaScript画笔离开画布纸张,并移动到该坐标而不会绘制一条直线。

  要开始绘制一条直线,在?处使用x和y坐标调用linTo方法,将虚拟画笔放回到画布上,并且开始绘制到这个新的坐标的一条路径。这里,我们从点(10,10)到点(60,60)绘制了一条线,这是从画布的左上角到右下角的一条对角线,这构成了X的第一条线。

  在?处,再次调用moveTo,它设置了一个新的位置作为绘制的起点。在?处,再次调用lineTo,从点(60,10)到点(10,60)绘制一条线,这是从画布的右上角到左下角的一条对角线,它完成了X图形。

  但我们还没有做完!到目前为止,只是告诉画布要绘制什么,还没有手绘地绘制任何内容。因此,在?处,调用了stroke方法,它最终使得线条出现在屏幕之上。

  试试看

  尝试使用beginPath、moveTo、lineTo和stroke方法,绘制这个可爱的火柴人。可以使用strokeRect绘制脑袋。脑袋是一个20像素x20像素的方块,线条的宽度是4像素。

1
3