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数据库Timestamp、time、datetime 区别及使用详解

    对于数据库来说,有多种日期时间字段可供选择,如 timestamp 和 datetime 。 不仅新手,包括一些有经验的程序员还是比较迷茫,究竟我该用哪种类型来存储日期时间呢? 一个完整的日期格式如下:YYYY-MM-DD HH:MM:SS[.fraction],它可分为两部分:date部分和time部分,其中,date部分对应格式中的“YYYY-MM-DD…

    编程开发 2018年5月2日
    6.1K1
  • JS截取字符串方法详解:前面/中间/后面

    JS截取字符串方法,JS的match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。 js截取字符串中间的内容 var str = “aaabbbcccdddeeefff”; str = str.match(/aaa(\S*)fff/)[1]; alert(str);//结果bbbcccdddeee js截取某个字符串前面的内容 var…

    2023年1月5日
    3.9K0
  • 精!HTML5调用手机拍照实现图片上传服务器,并将图片地址存进数据库(上)

    这篇文章主要为大家详细介绍了HTML5+Canvas+jquery技术,调用手机拍照功能实现图片上传。 不懂原理的新手,可以先学习:超清晰!HTML5 实现手机拍照上传功能原理讲解 上传页面用到了HTML5的file文件上传功能,再配合canvas。 实现流程 首先在前端把图片进行压缩,因为手机的不同,可能有的手机拍照给力,像素高,拍出来的图片的大小就相对大…

    2022年8月11日
    1.0K0
  • Tkinter(Python GUI编程)从入门到精通(一)

    什么是Tkinter 一个 GUI 程序一般由窗口、下拉菜单或者对话框等图形化组件构成, 通过鼠标点击菜单栏、按钮或者弹出对话框的形式来实现人机互动,从而提升人机交互的体验,让“冰冷”的程序变得有“温度”。 注意:GUI 这一概念并非 Python 语言独有,它属于计算机科学技术领域中的一个概念,比如使用 C/C++ 语言开发的 Qt、GTK、Electro…

    2022年8月20日
    9320
  • 手机上可以python编程吗,手机如何开发python

    想在手机上编写python代码? python语言应用很广泛,很多小伙伴想利用空闲时间学习Python,但是有时候身边没有电脑,今天就给大家分享两种手机编写运行python的方法,让你可以直接在自己的手机上做python开发学习。 一、直接在线编写运行(免安装) 手机通过浏览器打开 https://c.runoob.com/compile/9/ 推荐:★★★…

    2022年3月16日 编程开发
    4.9K0
  • Python开发环境搭建

    今天学习在计算机上配置Python开发环境。 虽然使用Python自带的Vim编辑器+命令行的方式比较酷,然而一个优秀的IDE确实能让开发速度提升不少。 Python开发环境一在Eclipse中搭建Python开发环境 基本软件需求:1. Eclipse(https://www.eclipse.org/downloads/)2. Python解释器(www.…

    2019年3月15日
    5.4K1

发表回复

登录后才能评论