html实现画板的基本操作,JavaScript操作Canvas实现画板实例分析

Canvas元素用来支持在网页上绘制图形图像

以前在网页中进行交互绘图是很困难的(需要依赖额外的第三方插件)，而引入的Canvas特性使得作者可以很容易的在网页上绘制各种图形和图像。

Canvas提供了脚本(JavaScript)应用接口，我们可以使用JS代码来操作画布，添加各种图形以及实现用户交互。这些特性使得HTML5在开发网页游戏和一些复杂的网页动画上变得更加方便。

比如下面这个例子，使用Canvas实现了简单的在线画板功能，你可以直接在网页上绘制线条：

效果图如下：

实际上Canvas规范包含两个部分，一个是HTML5新引入的canvas元素，还有更为关键的2D渲染上下文。实际上前者只是一个容器，后者才是真正绘图的地方。它包含绘图和图形操作所需要的全部方法和丰富功能。强调一下：绘图是在2D渲染上下文中进行的，而不是在canvas元素中进行。可以通过canvas元素访问和显示2D渲染上下文。

canvas元素的语法很简单，除了id和class外，还有两个和容器尺寸相关的属性：宽和高。

我们接下来先搞清楚2D渲染上下文的用法。

画布图形实际上是绘制在2D渲染上下文里

canvas元素并非Canvas中最强大的部分，真正的关键部分是2D渲染上下文，这是你真正绘制图形的地方。canvas元素的用途只是作为2D渲染上下文的包装器，它包含绘图和图形操作所需要的全部方法和丰富功能。理解这一点是很重要的，强调一下：绘图是在2D渲染上下文中进行的，而不是在canvas元素中进行。可以通过canvas元素访问和显示2D渲染上下文。

坐标系统

2D渲染上下文是一种基于屏幕的标准绘图平台。与其他的2D平台类似，它采用平面的笛卡儿坐标系统，左上角为原点(0,0)。向右移动时，x坐标值会增加；向下移动时，y坐标值会增加。如果你想把图形绘制到正确的位置上，一定要理解这个坐标系统。

坐标系统的1个单位通常相当于屏幕的1个像素，所以位置(24，30)是向右24像素和向下30像素的位置。有时候坐标系统的1个单位相当于2个像素(例如，在一些高分辨率显示器中)，但是一般的经验法则是1个坐标单位等于1个屏幕像素。

访问2D渲染上下文

我们先创建只有一个空白canvas元素的简单HTML网页：

在这个例子中，我们将这个canvas元素赋值给一个变量，然后再通过调用getContext方法将得到的2D渲染上下文赋给另一个变量。必须强调一点，由于我们使用了jQuery，所以需要调用get方法才能访问DOM中的canvas元素，然后才能够访问Canvas的getContext方法。

有了包含2D渲染上下文的变量之后，就可以开始绘制图形了。在上下文变量声明语句之后添加下面这行代码：

context.fillRect(0,0,200,200);

完整的JS代码如下：

上述代码将在画布上绘制如下的一个黑色矩形，从坐标(0，0)处开始，长宽均为200px：

这个矩形是黑色的，因为Canvas所绘制元素的默认颜色是黑色。

最后，如果有想一起学习web前端，HTML5及JavaScript的可以来一下我的前端群733581373，好友都会在里面交流，分享一些学习的方法和需要注意的小细节，每天也会准时的讲一些前端的炫酷特效，及前端直播课程学习

如果想看到更加系统的文章和学习方法经验可以关注的微信号：‘web前端技术圈’或者‘webxh6’关注后回复‘2018’可以领取一套完整的学习视频

html实现画板的基本操作,JavaScript操作Canvas实现画板实例分析相关推荐

html实现画板的基本操作,javascript实现画板功能
本文实例为大家分享了javascript实现画板功能的具体代码,供大家参考,具体内容如下画板功能的实现 *{ margin: 0; padding: 0; list-style: none; } b ...
html5画板的使用方法,使用canvas实现画板
是 HTML5新增的元素,可用于通过使用JavaScript中的脚本来绘制图形.例如,它可以用于绘制图形,制作照片,创建动画,甚至可以进行实时视频处理或渲染. 思路: 尝试在画布上先用鼠标画点,获取鼠 ...
python目录遍历_python文件操作之目录遍历实例分析
本文实例讲述了python文件操作之目录遍历的方法.分享给大家供大家参考.具体分析如下: Python的os模块,包含了普遍的操作系统功能,这里主要学习与路径相关的函数: os.listdir(dir ...
JavaScript键盘事件常见用法实例分析
JavaScript 键盘事件有以下3种 keydown 键盘按键按下(如果按着不放,会持续触发该事件),可以捕获组合键. keypress 键盘非功能按键按下(在keydown之后触发,如果按着不放 ...
nodejs操作sqlserver数据_实例分析nodejs基于mssql模块连接sqlserver数据库的简单封装操作...
本文主要介绍了nodejs基于mssql模块连接sqlserver数据库的简单封装操作,结合实例形式分析了nodejs中mssql模块的安装与操作sqlserver数据库相关使用技巧,需要的朋友可以参 ...
巧用canvas实现画板功能，使用画笔在图片上涂画，橡皮擦可擦除涂画，并保存
canvas 是HTML5的元素,使用JavaScript 在网页上绘制图像. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 而如果想实现画笔在画板涂画画笔在图片上涂画,橡皮擦 ...
html+js+canvas实现画板涂画功能和vue+canvas实现画板涂画功能
1,html+js+canvas实现画板涂画功能效果如下: <!DOCTYPE HTML> <html> <head><meta charset=" ...
javascript学习-canvas
canvas 简介 html5中canvas标签用于绘制图像.不过canvas标签本身没有绘制能力,是图形的容器,需要用脚本完成绘制.getContext()方法可返回一个对象,该对象提供了用于在画布 ...
html格子像素画,canvas像素画板的实现代码
最近项目上要实现一个类似像素风格的画板,可以像素小格子可以擦除,框选变色,可以擦出各种图形,这样一个小项目看似简单,包含的东西还真不少. 绘制像素格子我们先定义像素格子类 Pixel = funct ...
HTML5 canvas 做画板画图可以做电子白板
HTML5 canvas 做画板画图可以做电子白板 <html><head><meta charset="utf-8"><title&g ...

html实现画板的基本操作,JavaScript操作Canvas实现画板实例分析

html实现画板的基本操作,JavaScript操作Canvas实现画板实例分析相关推荐

最新文章

热门文章