HTML5- Canvas入门(一)画线

canvas是一个H5的标签:

<canvas> </canvas>

canvas本身没有任何的绘图能力,所有的绘图工作都是通过js来实现的。通常我们在js通过getElementById来获取要操作的canvas(这意味着咱得给canvas设个id):

<canvas id="myCanvas"></canvas>

<script>
var c = document.getElementById("myCanvas"); //获取要操作的canvas
//操作canvas的代码...
</script>

注意最好在一开始的时候就给canvas设置好其宽高(若不设定宽高,浏览器会默认设置canvas大小为宽300、高100像素),而且不能使用css来设置(会被拉伸),建议直接写于canvas标签内部:

<canvas id="myCanvas" width="200" height="200"></canvas>

也可以在js脚本中设置:

<canvas id="myCanvas"></canvas>

<script>
var c = document.getElementById("myCanvas");
c.width=200;
c.height=200;
</script>

关于canvas大小需要知道的一点是,后续咱们对canvas所做的全部绘图操作,超出此大小范围的部分是不可见的。

接着在聊如何在canvas上绘图前,咱得先说说.getContext(“2d”)这东西。
.getContext() 是canvas的绘图对象/方法,要让canvas执行绘图工作必须先获取canvas的.getContext()对象来执行。

.getContext()只接受一个参数,该参数用于获取canvas的绘图环境,例如.getContext(“2d”)表示该canvas的绘图环境为2D平面(可以绘制文本、直线、弧线、矩形、圆形等)。当前H5只支持2D环境,在不久的将来会开放3D绘图功能。(故咱可将“getContext”翻译为“获取绘图环境”)

先来个小例子,从最简单的绘制直线开始:

<canvas id="myCanvas" width="200" height="200" style="border:solid 1px #CCC;">
您的浏览器不支持canvas,建议使用最新版的Chrome
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象
ctx.moveTo(10,10);   //定义绘画开始的位置
ctx.lineTo(150,50);  //画一条直线,结束点坐标是x=150,y=50
ctx.stroke();  //描边
</script>

效果如下:
HTML5- Canvas入门(一)画线

在这里我们使用了3个getContext(“2d”)对象的绘图方法:

.moveTo(x坐标 , y坐标)      可以理解为定位画笔在画布上的位置(注意所有绘图方法所定义的坐标是相对canvas而言的而不是浏览器窗口,对canvas来说,最左上角的点的坐标是(0,0))

.lineTo(x坐标 , y坐标)      顾名思义,就是画一条直线到某个点,很好理解。需要知道的是此方法仅仅做路径运动,而不存在任何视觉上的绘图效果(上色、描边)

.stroke()     描边方法,有玩过AfterEffect的朋友会很清楚,不给运动路径加stroke特效的画是不存在描边效果的,canvas也一样,想要运动路径轨迹能有视觉效果,需要使用相应的上色/描边方法。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/10637.html

(0)
江山如画的头像江山如画管理团队
上一篇 2022年6月23日 上午8:43
下一篇 2022年7月10日 上午8:57

99%的人还看了以下文章

  • ASP.NET(C#)学习笔记一:注释、常量与变量

    ASP.NET(C#)的注释 多行注释: /* */ 单行注释: //计算圆的面积:Pi*r*r 实例1:注释的使用 /*以下程序由www.125jz.com站长于2018.1.30日开发,测试通过。     完成功能:计算圆的面积*/     public partial class W…

    2018年1月30日
    2.7K0
  • 如何设置mysql自动更新创建时间和更新时间

    做项目时,希望:新增记录时,mysql自动将系统的当前时间set到创建时间和更新时间这两个字段中。更新记录时,mysql只update更新时间字段的时间。 设置mysql自动更新创建时间和更新时间的方法: 找到表中创建时间和更新时间的字段,将其修改为下列代码。创建时间字段 ‘creat_time’ timestamp NULL DEFAULT CURRENT…

    2018年12月24日
    5.5K0
  • Windows10+IIS+PHP7+MySQL5.7环境搭建

    IIS配置 本次搭建使用的系统是Windows7,Windows8,10与此类似。 开启IIS 开始–>控制面板–>程序和功能,点击左边栏的开启或关闭Windows功能,如图: 选择Internet信息服务并选择里面的CGI。打开浏览器,输入localhost或127.0.0.1,可以正常打开网页则说明开启成功。 新建站点…

    2021年8月14日 编程开发
    2.1K0
  • 简!python中安装pip的方法

     pip的安装 打开cmd,输入以下命令安装pip: python -m ensurepip –default-pip 出现如下图所示,代表pip安装成功: 查看pip版本 pip –version 更新pip版本 python -m pip install –upgrade pip 安装库 例如安装pyyaml库,打开cmd输入以下命令: pip i…

    2023年5月18日
    4.2K0
  • 单元测试步骤、单元测试策略,单元测试快速入门教程三

    工作性质不同决定了工作侧重点也不同,因此程序开发人员在单元测试过程中关注更多的是程序代码本身和已经实现的功能。因此,站在他们的角度看,单元测试的过程就是在编写测试方法之前: 首先考虑如何对方法进行测试; 然后编写测试代码; 下一步就是运行某个测试,或者同时运行该单元的所有测试,确保所有测试都通过。 下图从宏观的角度概括了单元测试的工作过程图。 1.单元测试进…

    2018年4月18日
    4.7K0
  • String、StringBuffer、StringBuilder的区别?

    String在实例化之后,其内存空间的内容大小是不能够被修改的;而StringBuffer是一个线程安全的可变字符序列,在实例化之后可以动态的修改堆内存中的内容,所以内存长度和大小是可变的;StringBuilder实例化之后内存大小长度也是可变的,不同之处在于StringBuilder不是线程同步,因此操作起来必然比StringBuffer更加高效。

    2018年10月24日
    2.0K0

发表回复

登录后才能评论