CN111078035B - 一种基于HTML5 Canvas的绘图方法 - Google Patents
一种基于HTML5 Canvas的绘图方法 Download PDFInfo
- Publication number
- CN111078035B CN111078035B CN201911197085.6A CN201911197085A CN111078035B CN 111078035 B CN111078035 B CN 111078035B CN 201911197085 A CN201911197085 A CN 201911197085A CN 111078035 B CN111078035 B CN 111078035B
- Authority
- CN
- China
- Prior art keywords
- canvas
- layer
- event
- operation layer
- mouse
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 21
- 230000001960 triggered effect Effects 0.000 claims description 15
- 230000004044 response Effects 0.000 description 7
- 230000008569 process Effects 0.000 description 6
- 238000004364 calculation method Methods 0.000 description 5
- 238000009877 rendering Methods 0.000 description 3
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 238000012544 monitoring process Methods 0.000 description 2
- 208000018747 cerebellar ataxia with neuropathy and bilateral vestibular areflexia syndrome Diseases 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000005057 finger movement Effects 0.000 description 1
- 238000013507 mapping Methods 0.000 description 1
- 238000010422 painting Methods 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/03—Arrangements for converting the position or the displacement of a member into a coded form
- G06F3/033—Pointing devices displaced or positioned by the user, e.g. mice, trackballs, pens or joysticks; Accessories therefor
- G06F3/0354—Pointing devices displaced or positioned by the user, e.g. mice, trackballs, pens or joysticks; Accessories therefor with detection of 2D relative movements between the device, or an operating part thereof, and a plane or surface, e.g. 2D mice, trackballs, pens or pucks
- G06F3/03543—Mice or pucks
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/03—Arrangements for converting the position or the displacement of a member into a coded form
- G06F3/033—Pointing devices displaced or positioned by the user, e.g. mice, trackballs, pens or joysticks; Accessories therefor
- G06F3/0354—Pointing devices displaced or positioned by the user, e.g. mice, trackballs, pens or joysticks; Accessories therefor with detection of 2D relative movements between the device, or an operating part thereof, and a plane or surface, e.g. 2D mice, trackballs, pens or pucks
- G06F3/03547—Touch pads, in which fingers can move on a surface
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/03—Arrangements for converting the position or the displacement of a member into a coded form
- G06F3/033—Pointing devices displaced or positioned by the user, e.g. mice, trackballs, pens or joysticks; Accessories therefor
- G06F3/038—Control and interface arrangements therefor, e.g. drivers or device-embedded control circuitry
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
- G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明涉及一种基于HTML5Canvas的绘图方法，包括以下步骤：S1、创建原始大小的底层<canvas>和尺寸小于底层<canvas>的操作层<canvas>；S2、根据预设的偏移数据，将操作层<canvas>覆盖于底层<canvas>之上；S3、在操作层<canvas>上进行图像绘制，记录图像绘制轨迹；S4、根据图像绘制轨迹，重新在底层<canvas>上进行图像绘制，以完成绘图。与现有技术相比，本发明基于动态分辨率原理，通过构建双层<canvas>，在上层较小的<canvas>上监听鼠标或触摸事件以保证绘图流畅性；并将上层的绘图轨迹在下层<canvas>上重现，以保证图像的清晰度。
Description
技术领域
本发明涉及移动设备绘图技术领域，尤其是涉及一种基于HTML5 Canvas的绘图方法。
背景技术
HTML5提供了<canvas>标签，以通过脚本(通常是JavaScript)来绘制图形。它不仅可以用于绘制图表、制作图片，甚至可以制作动画和游戏，目前大部分的浏览器(如桌面和移动版的Chrome、Firefox、Safari等)几乎都对<canvas>有比较好的支持，这使得众多企业和开发者能以较低的成本实现跨平台的、以图形展示和动画为主的前端应用程序。
以手写签名的功能模块为例，该功能模块用途广泛，可以运用在各种场景，比如在理财产品的签约界面上请用户签名确认签约，但是企业或开发者需要保证该功能模块能够兼容iOS、Android、甚至Windows等各类操作系统。
传统经常使用的技术手段是基于<canvas>开发Web APP，同时采用HTML5+WKWebView/UIWebView/WebView/CEF的组合技术方案，以开发跨平台APP。利用<canvas>实现绘图功能的解决方案大多是利用在<canvas>上检测鼠标点击、松开事件或手指的触摸、离开事件，从而控制在<canvas>上调用<canvas>的绘图API绘制线条。具体的步骤一般包括：
一、在鼠标点击、手指触摸时，调用<canvas>的移动绘制起点API(ApplicationProgramming Interface，应用程序接口)；
二、在鼠标没有松开或手指没有离开屏幕时，监听鼠标、手指移动事件，每次事件被触发时，调用绘制直线API并重新调用移动绘制起点API，形成绘制连续线条的目的；
三、在鼠标松开或手指离开屏幕时，取消对监听鼠标、手指移动事件的触发处理，结束绘制。
上述方法在Chrome、Firefox、iOS设备上能够实现较好的绘图功能，能够保证一笔一画均贴合手指和鼠标的移动轨迹。但是，在Android设备上测试时，就可能出现滑动不跟手、线条不平滑等问题。除了设备、操作系统和浏览器的性能差异之外，产生这一问题的主要原因是由于HTML5的<canvas>绘制表现与<canvas>本身大小有关，在目前移动设备普遍拥有高DPI(Dots Per Inch，每英寸点数)、高分辨率的情况下，铺满全屏的<canvas>通常会占据三、四百万个像素，在这样大小的<canvas>上进行绘图必然会导致响应性能的滞后。
为此，现有技术考虑改变<canvas>绘制区域的大小以提升响应性能，<canvas>绘制区域的大小是通过<canvas>本身带有的属性width(宽度)和height(高度)来决定，但是其本身呈现的大小可以通过CSS(Cascading Style Sheets，层叠样式表)的width和height来指定。开发者可以定义一个CANVAS_SCALE属性，通过将CSS中width和height乘以CANVAS_SCALE，从而设置<canvas>中width和height属性值。例如：将CANVAS_SCALE设置为0.5，那么在<canvas>的CSS属性中设置width和height分别为3000和2000时，<canvas>实际绘制区域大小将改变为1500*1000。
设置CANVAS_SCALE有非常明显的好处：一是开发者可以根据设备类型和性能动态调整这个值(比如，在PC使用时可以将其设置为1，而在Android移动端使用时设置为0.5)；
二是可以直接使用原先用于计算鼠标、手指位置在<canvas>中对应坐标的代码，仅需要在计算中合适的位置引入对CANVAS_SCALE的乘法逻辑即可；
三是对于笔触的粗细也能很容易进行调整，只需将原先的lineWidth乘以CANVAS_SCALE的平方即可。
尽管该技术方案能明显提高手绘响应性能，却会使得<canvas>中呈现的绘制线条变得模糊不清晰，其原因在于<canvas>实际包含的像素数量被减小到了原来的1/4，也就无法保证绘制图像的清晰度。
于是，现有技术还提出了另外一种尽可能减小<canvas>的大小的方法，具体是将一个<canvas>切割为多个子<canvas>的组合，以此既能保证<canvas>上的图形仍是原先的清晰度，又能减小<canvas>大小以提升响应性能。然而，该技术方案带来的问题是使得计算鼠标或touch位置在canvas的映射坐标变得相对复杂，并且最终的输出图形需要通过计算和拼接才能最终成型，这无疑增加了程序引入bug的风险。
发明内容
本发明的目的就是为了克服上述现有技术存在的缺陷而提供一种基于HTML5Canvas的绘图方法，根据动态分辨率的原理，在提升绘图时的响应性能的同时保证绘图时图像的清晰度。
本发明的目的可以通过以下技术方案来实现：一种基于HTML5 Canvas的绘图方法，包括以下步骤：
S1、创建底层<canvas>和操作层<canvas>，其中，操作层<canvas>的尺寸小于底层<canvas>的尺寸；
S2、根据预设的偏移数据，将操作层<canvas>覆盖于底层<canvas>之上；
S3、在操作层<canvas>上进行图像绘制，记录图像绘制轨迹；
S4、根据图像绘制轨迹，重新在底层<canvas>上进行图像绘制，以完成绘图。
进一步地，所述步骤S1中底层<canvas>的尺寸为原始尺寸大小，所述操作层<canvas>的尺寸是将底层<canvas>的尺寸按照预先设置的比例进行缩小后的尺寸大小。
进一步地，所述步骤S1中操作层<canvas>的尺寸具体为：
其中，WO表示操作层<canvas>的宽度，HO表示操作层<canvas>的高度，canvasWidth为底层<canvas>的宽度，canvasHeight为底层<canvas>的高度，CANVAS_SCALE表示预先设置的比例。
进一步地，所述步骤S2中预设的偏移数据包括操作层<canvas>高度方向与底层<canvas>高度方向之间的距离，以及操作层<canvas>宽度方向与底层<canvas>宽度方向之间的距离。
进一步的，所述步骤S3中图像绘制轨迹包括操作层<canvas>上鼠标或触摸的位置数据。
进一步地，所述步骤S3具体包括以下步骤：
S31、在操作层<canvas>上绑定mousedown或touchstart事件，当mousedown或touchstart事件被触发后，开始记录正在绘制的标志位，并计算鼠标或触摸对应在操作层<canvas>上的位置，其中，mousedown事件对应为“鼠标按下”，touchstart事件对应为“触摸按下”；
S32、调用context的API——beginPath和moveTo，以在操作层<canvas>上开始绘制；
S33、对操作层<canvas>上的mousemove或touchmove事件进行检测，若在操作层<canvas>上检测到mousemove或touchmove事件，则根据当前绘制的标志位判断是否正在执行绘制操作，若判断为正在执行绘制操作，则记录mousemove或touchmove事件触发时的鼠标或触摸位置，其中，mousemove事件对应为“鼠标移动”，touchmove事件对应为“触摸移动”；
S34、根据mousemove或touchmove事件触发时的鼠标或触摸位置，计算得到操作层<canvas>上需要进行绘制的坐标位置；
S35、基于操作层<canvas>上需要进行绘制的坐标位置，调用context的API——lineTo和stroke，以在操作层<canvas>上绘制线条；
S36、对操作层<canvas>上的mouseup或touchend事件进行检测，若在操作层<canvas>上检测到mouseup或touchend事件，则记录mouseup或touchend事件触发时的鼠标或触摸位置，其中，mouseup事件对应为“鼠标按键松开”，touchend事件对应为“触摸离开”；
S37、将步骤S31、S33和S36中记录的鼠标或触摸位置数据整理为操作层<canvas>上的图像绘制轨迹。
进一步地，所述步骤S34中操作层<canvas>上需要进行绘制的坐标位置具体为：
其中，xO表示操作层<canvas>上需要进行绘制的位置的横坐标，yO表示操作层<canvas>上需要进行绘制的位置的纵坐标，touchX表示mousemove或touchmove事件触发时的鼠标或触摸位置的横坐标，touchY表示mousemove或touchmove事件触发时的鼠标或触摸位置的纵坐标，left表示操作层<canvas>高度方向与底层<canvas>高度方向之间的距离，top表示操作层<canvas>高度方向与底层<canvas>高度方向之间的距离。
进一步地，所述步骤S4具体包括以下步骤：
S41、根据操作层<canvas>上记录的mouseup或touchend事件触发时的鼠标或触摸位置，计算底层<canvas>的绘制坐标位置；
S42、基于底层<canvas>的绘制坐标位置以及操作层<canvas>上的图像绘制轨迹，在底层<canvas>上完成图像绘制；
S43、清除操作层<canvas>上记录的所有数据。
进一步地，所述步骤S41中底层<canvas>的绘制坐标位置具体为：
其中，xB表示底层<canvas>的绘制坐标位置的横坐标，yB表示底层<canvas>的绘制坐标位置的纵坐标，touchX'表示操作层<canvas>上mouseup或touchend事件触发时的鼠标或触摸位置的横坐标，touchY'表示操作层<canvas>上mouseup或touchend事件触发时的鼠标或触摸位置的纵坐标。
与现有技术相比，本发明基于动态分辨率的原理，采用上下两层<canvas>的方式，其中，底层<canvas>保持原始大小，上层的操作层<canvas>按照比例缩小，并在操作层<canvas>上监听鼠标或触摸事件以保证绘图流畅性，同时记录图像绘制轨迹，在操作层<canvas>绘制结束后，将图像绘图轨迹在底层<canvas>上进行重现，如此既提升了绘制过程的响应性能、保证了绘制过程的流畅性，同时使得最终绘制的图像具有足够的清晰度。
附图说明
图1为本发明的方法流程图；
图2为实施例中应用效果示意图。
具体实施方式
下面结合附图和具体实施例对本发明进行详细说明。
如图1所示，一种基于HTML5 Canvas的绘图方法，包括以下步骤：
S1、创建底层<canvas>和操作层<canvas>，其中，操作层<canvas>的尺寸小于底层<canvas>的尺寸；
S2、根据预设的偏移数据，将操作层<canvas>覆盖于底层<canvas>之上；
S3、在操作层<canvas>上进行图像绘制，记录图像绘制轨迹；
S4、根据图像绘制轨迹，重新在底层<canvas>上进行图像绘制，以完成绘图。
本发明利用动态分辨率的原理，通过适当降低分辨率，以调高绘图响应性能，同时构建双层<canvas>：底层<canvas>及其上层的操作层<canvas>，保证绘制图像的清晰度。
在实际应用中，<canvas>绘制区域的大小是通过<canvas>本身带有的属性width(宽度)和height(高度)来决定，而其本身呈现的大小可以通过CSS(即层叠样式表)中的width(宽度)和height(高度)来指定。预先定义一个名为CANVAS_SCALE属性，表示通过底层<canvas>的缩放比例，将底层<canvas>CSS中width和height乘以CANVAS_SCALE，即可设置操作层<canvas>中width和height属性值。如：将CANVAS_SCALE设置为0.5，那么当原始的底层<canvas>的CSS属性中设置width和height分别为3000和2000时，终端的操作层<canvas>实际绘制区域大小就为1500*1000。
如图2所示的应用效果示意图，本实施例先创建一个原始大小的底层<canvas>，然后在其上覆盖一个宽度和高度分别为Wo＝canvasWidth*CANVAS_SCALE和Ho＝canvasHeight*CANVAS_SCALE、但其CSS属性中的width和height仍与底层<canvas>相同的操作层<canvas>，由此得到两个在外观上大小相同、互相重叠，但上层实际大小要小于下层的操作层<canvas>。
在完成两层<canvas>的创建后，需要在上层的操作层<canvas>上实现绘图，具体原理与实现步骤如下：
1、在操作层<canvas>上绑定mousedown(鼠标按下)或touchstart(触摸按下)事件，当mousedown或touchstart事件被触发后，记录正在绘制的标志位，并计算鼠标或触摸位置对应在<canvas>上的位置，之后调用context的API——beginPath、moveTo，准备开始绘制；
2、在操作层<canvas>上检测到mousemove(鼠标移动)或touchmove(触摸移动)事件后，根据当前绘制的标志位判断是否正在执行绘制操作，如果正在绘制，则记录下事件触发时的鼠标、触摸位置，使用以下计算式计算在<canvas>上需要绘制的坐标位置：
式中，xO表示操作层<canvas>上需要进行绘制的位置的横坐标，yO表示操作层<canvas>上需要进行绘制的位置的纵坐标，touchX表示mousemove或touchmove事件触发时的鼠标或触摸位置的横坐标，touchY表示mousemove或touchmove事件触发时的鼠标或触摸位置的纵坐标，left表示操作层<canvas>高度方向与底层<canvas>高度方向之间的距离，top表示操作层<canvas>高度方向与底层<canvas>高度方向之间的距离；
计算位置完成后，调用context的API——lineTo、stroke绘制直线；
3、在操作层<canvas>上检测到mouseup(鼠标按键松开)或touchend(触摸离开屏幕)事件后，根据记录下的触发事件时鼠标、触摸触摸位置，在底层<canvas>上绘制图形，底层<canvas>计算绘制坐标位置的计算式如下：
其中，xB表示底层<canvas>的绘制坐标位置的横坐标，yB表示底层<canvas>的绘制坐标位置的纵坐标，touchX'表示操作层<canvas>上mouseup或touchend事件触发时的鼠标或触摸位置的横坐标，touchY'表示操作层<canvas>上mouseup或touchend事件触发时的鼠标或触摸位置的纵坐标；
4、在底层<canvas>的图像绘制完成后，清除正在绘制的标志位、mousemove(鼠标移动)或touchmove(触摸移动)事件的触发位置记录、以及操作层<canvas>的所有记录数据。
通过上述技术方案，虽然在操作层<canvas>上鼠标、触摸绘图过程中画出的线会模糊，但能保持绘制过程流畅、跟手；而松开鼠标或手指后，在底层<canvas>上重新绘制出的图形是与屏幕像素点1:1对应的清晰图像，如此既保证了绘制过程的流畅，又保证最终形成的图形的清晰度。
Claims (4)
1.一种基于HTML5 Canvas的绘图方法，其特征在于，包括以下步骤：
S1、创建底层<canvas>和操作层<canvas>，其中，操作层<canvas>的尺寸小于底层<canvas>的尺寸；
S2、根据预设的偏移数据，将操作层<canvas>覆盖于底层<canvas>之上；
S3、在操作层<canvas>上进行图像绘制，记录图像绘制轨迹；
S4、根据图像绘制轨迹，重新在底层<canvas>上进行图像绘制，以完成绘图；
所述步骤S1中底层<canvas>的尺寸为原始尺寸，所述操作层<canvas>的尺寸是将底层<canvas>的尺寸按照预先设置的比例进行缩小后的尺寸，所述步骤S1中操作层<canvas>的尺寸具体为：
其中，WO表示操作层<canvas>的宽度，HO表示操作层<canvas>的高度，canvasWidth为底层<canvas>的宽度，canvasHeight为底层<canvas>的高度，CANVAS_SCALE表示预先设置的比例；
所述步骤S2中预设的偏移数据包括操作层<canvas>高度方向与底层<canvas>高度方向之间的距离，以及操作层<canvas>宽度方向与底层<canvas>宽度方向之间的距离；
所述步骤S3中图像绘制轨迹包括操作层<canvas>上鼠标或触摸的位置数据，所述步骤S3具体包括以下步骤：
S31、在操作层<canvas>上绑定mousedown或touchstart事件，当mousedown或touchstart事件被触发后，开始记录正在绘制的标志位，并计算鼠标或触摸对应在操作层<canvas>上的位置，其中，mousedown事件对应为“鼠标按下”，touchstart事件对应为“触摸按下”；
S32、调用context的API——beginPath和moveTo，以在操作层<canvas>上开始绘制；
S33、对操作层<canvas>上的mousemove或touchmove事件进行检测，若在操作层<canvas>上检测到mousemove或touchmove事件，则根据当前绘制的标志位判断是否正在执行绘制操作，若判断为正在执行绘制操作，则记录mousemove或touchmove事件触发时的鼠标或触摸位置，其中，mousemove事件对应为“鼠标移动”，touchmove事件对应为“触摸移动”；
S34、根据mousemove或touchmove事件触发时的鼠标或触摸位置，计算得到操作层<canvas>上需要进行绘制的坐标位置；
S35、基于操作层<canvas>上需要进行绘制的坐标位置，调用context的API——lineTo和stroke，以在操作层<canvas>上绘制线条；
S36、对操作层<canvas>上的mouseup或touchend事件进行检测，若在操作层<canvas>上检测到mouseup或touchend事件，则记录mouseup或touchend事件触发时的鼠标或触摸位置，其中，mouseup事件对应为“鼠标按键松开”，touchend事件对应为“触摸离开”；
S37、将步骤S31、S33和S36中记录的鼠标或触摸位置数据整理为操作层<canvas>上的图像绘制轨迹。
2.根据权利要求1所述的一种基于HTML5 Canvas的绘图方法，其特征在于，所述步骤S34中操作层<canvas>上需要进行绘制的坐标位置具体为：
其中，xO表示操作层<canvas>上需要进行绘制的位置的横坐标，yO表示操作层<canvas>上需要进行绘制的位置的纵坐标，touchX表示mousemove或touchmove事件触发时的鼠标或触摸位置的横坐标，touchY表示mousemove或touchmove事件触发时的鼠标或触摸位置的纵坐标，left表示操作层<canvas>高度方向与底层<canvas>高度方向之间的距离，top表示操作层<canvas>高度方向与底层<canvas>高度方向之间的距离。
3.根据权利要求2所述的一种基于HTML5 Canvas的绘图方法，其特征在于，所述步骤S4具体包括以下步骤：
S41、根据操作层<canvas>上记录的mouseup或touchend事件触发时的鼠标或触摸位置，计算底层<canvas>的绘制坐标位置；
S42、基于底层<canvas>的绘制坐标位置以及操作层<canvas>上的图像绘制轨迹，在底层<canvas>上完成图像绘制；
S43、清除操作层<canvas>上记录的所有数据。
4.根据权利要求3所述的一种基于HTML5 Canvas的绘图方法，其特征在于，所述步骤S41中底层<canvas>的绘制坐标位置具体为：
其中，xB表示底层<canvas>的绘制坐标位置的横坐标，yB表示底层<canvas>的绘制坐标位置的纵坐标，touchX'表示操作层<canvas>上mouseup或touchend事件触发时的鼠标或触摸位置的横坐标，touchY'表示操作层<canvas>上mouseup或touchend事件触发时的鼠标或触摸位置的纵坐标。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911197085.6A CN111078035B (zh) | 2019-11-29 | 2019-11-29 | 一种基于HTML5 Canvas的绘图方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911197085.6A CN111078035B (zh) | 2019-11-29 | 2019-11-29 | 一种基于HTML5 Canvas的绘图方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111078035A CN111078035A (zh) | 2020-04-28 |
| CN111078035B true CN111078035B (zh) | 2024-02-13 |
Family
ID=70312005
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911197085.6A Active CN111078035B (zh) | 2019-11-29 | 2019-11-29 | 一种基于HTML5 Canvas的绘图方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111078035B (zh) |
Families Citing this family (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112100538B (zh) * | 2020-08-13 | 2022-04-12 | 福建天泉教育科技有限公司 | 基于canvas的图片交错平铺方法、存储介质 |
| CN112100540B (zh) * | 2020-08-13 | 2022-04-12 | 福建天泉教育科技有限公司 | 基于canvas的图片交叉镜像平铺方法、存储介质 |
| CN112215957A (zh) * | 2020-09-16 | 2021-01-12 | 哈尔滨新光光电科技股份有限公司 | 一种空中目标红外特性仿真方法 |
| CN112433666B (zh) * | 2020-12-14 | 2022-04-05 | 四川长虹电器股份有限公司 | 基于浏览器内核的触控绘制曲线的方法 |
| CN112637539A (zh) * | 2020-12-15 | 2021-04-09 | 浪潮云信息技术股份公司 | 一种基于Canvas绘制录像回放时间轴的方法 |
Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105573702A (zh) * | 2015-12-16 | 2016-05-11 | 广州视睿电子科技有限公司 | 远程批注移动、缩放的同步方法与系统 |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP6064381B2 (ja) * | 2012-06-13 | 2017-01-25 | 株式会社リコー | 情報共有システム |
-
2019
- 2019-11-29 CN CN201911197085.6A patent/CN111078035B/zh active Active
Patent Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105573702A (zh) * | 2015-12-16 | 2016-05-11 | 广州视睿电子科技有限公司 | 远程批注移动、缩放的同步方法与系统 |
Non-Patent Citations (1)
| Title |
|---|
| 刘耀钦 ; .HTML5 Canvas绘图技术及其在图像裁剪中的应用研究.洛阳师范学院学报.2016,(11),全文. * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111078035A (zh) | 2020-04-28 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111078035B (zh) | 一种基于HTML5 Canvas的绘图方法 | |
| CN109284059B (zh) | 笔迹绘制方法、装置、交互智能平板和存储介质 | |
| US7190379B2 (en) | Method for resizing and moving an object on a computer screen | |
| US8847961B2 (en) | Geometry, speed, pressure, and anti-aliasing for ink rendering | |
| US7870501B2 (en) | Method for hollow selection feedback | |
| US20090091547A1 (en) | Information display device | |
| CN108829327B (zh) | 交互智能设备的书写方法和装置 | |
| JP2006524367A (ja) | ウェブページの拡大／縮小された表示に関する方法、システム、及び、プログラム | |
| US8144166B2 (en) | Dynamic pixel snapping | |
| US6011549A (en) | Method and apparatus for smooth scrolling of text using window | |
| CN105930464B (zh) | Web富媒体跨屏适配方法和装置 | |
| CN110502205B (zh) | 图片显示边缘处理方法、装置、电子设备和可读存储介质 | |
| US10664072B2 (en) | Multi-stroke smart ink gesture language | |
| JP2014220720A (ja) | 電子機器、情報処理方法及びプログラム | |
| JP2012213019A (ja) | 画像処理装置、画像処理方法及びプログラム | |
| CN105894554A (zh) | 图像处理方法和装置 | |
| CN103345389B (zh) | 一种应用于网页的矢量图形的操作方法和装置 | |
| US9483171B1 (en) | Low latency touch input rendering | |
| US20080030525A1 (en) | Pixel snapping for anti-aliased rendering | |
| US9190018B2 (en) | Vector-based customizable pointing indicia | |
| CN105786314A (zh) | 窗口调整方法及使用该方法的电子装置 | |
| JP6945345B2 (ja) | 表示装置、表示方法及びプログラム | |
| CN115774513B (zh) | 基于尺子确定绘画方向的系统、方法、电子设备及介质 | |
| CN113535056B (zh) | 基于InkCanvas的选框调整方法和相关设备 | |
| WO2023273462A1 (zh) | 一种显示设备及填色方法 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |