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%的人还看了以下文章

  • 各版本MySQL数据库驱动程序jar包大全(java连接mysql驱动jar包)

    java连接mysql数据库,数据库程序开发步骤首先就要加载JDBC驱动程序,不同版本的mysql数据库需要的MySQL数据库驱动程序jar包版本也不同。 不少同学问怎么下载java连接mysql的驱动jar包? 今天给大家分享:各版本MySQL数据库驱动程序jar包大全(java连接mysql驱动jar包) mysql-connector-java-5.1…

    2019年9月28日
    11.1K1
  • 实用sql查询语句详解1:给列取别名、查询部分行、多列排序

    SQL(Structured Query Language)是用于访问和处理数据库的标准计算机语言,是所有数据库查询的语言,无论是高级查询还是低级查询,SQL查询语句的需求都是最常用的。 文章介绍了包括查询全部的行和列、给列取别名、查询部分行、多列排序、使用函数查询等。 SQL数据查询-SELECT语句基本结构 语句语法简单归纳为: SELECT selec…

    2018年2月5日
    3.0K0
  • Myeclipse设置JSP视图和代码显示在同一个窗口

    Myeclipse开发时,想同时查看页面及代码视图,如上图,而默认只能看到代码。 Myeclipse设置JSP页面和代码显示在同一个窗口的方法有两种。 一、在JSP页面上右击-open with-other… 在弹出的Editor selection窗口中选择web page editor,就可以了。 二、选择 window-preferences,如下图,…

    2018年12月17日 编程开发
    2.8K0
  • python 集合使用案例:选修课统计

    相关阅读:python 集合的使用,案例详解 本学期学校共开设了3门选修课,一个班有25位学生,选修的情况如下: 选修1号课程的同学有: set1 = {‘张三’, ‘李四’, ‘王五’, ‘马六’, ‘赵七’, ‘钱八’} 选修2号课程的同学有: set2 = {‘姬一’, ‘孙必’, ‘周冲’, ‘王五’, ‘方向’, ‘张玉’} 选修3号课程的同学有:…

    2020年1月22日
    6.6K0
  • 上机实战八:Java web编程综合案例

    建议学时:6 一、开发基于MVC模式的信息管理系统,如新闻发布系统,要求用户可查看、查询。管理员进入后台可对发布新闻(实现相应的增删查改)。 后台添加文章,建议使用UEditor! UEditor 是开源、免费的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果。 UEditor兼容性很好,是网站站长开发的首选,官网地址:UEditor官网 包…

    2018年12月11日
    2.4K0
  • 19个常用SQL数据库命令(函数、运算符)讲解

    讲解了19个常用的sql语句!

    2023年1月29日
    1920

发表回复

登录后才能评论