介绍 & lt; !doctype html>
& lt; html类=皀o-js"lang=皕h"比;
& lt; head>
& lt;元charset=皍tf-8"祝辞
& lt;元http-equiv=皒-ua-compatible"内容=癷e=edge"比;
& lt; title>帆布学习& lt;/title>
& lt;元名称=癲escription"内容=啊氨?
& lt;元名称=皏iewport"内容=翱矶?设备宽度,初始=1,比;
& lt;链接rel=癿anifest"href=https://www.yisu.com/zixun/" site.webmanifest ">
<帆布id=" theCanvas "宽度=" 800 "高度=" 400 ">
js/main.js
这篇文章主要介绍怎么利用帆布实现按住鼠标移动绘制出轨迹,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<强>概要
工作以来,写过vue,反应,正,则算法,小程序等知识,唯独没有写过画布,因为实在不会啊!
2018年,给自己设定一个小目标:学会画布,达到的效果是能用帆布实现一些css3不容易实现的动画。
本文作为学习画布的第一篇收获,很多人初学帆布做的第一个演示是实现一个“钟”,当然,我也实现了一个,不过不讲这个,而是讲讲一个更有趣,也更简单的玩意。
<强>鼠标按住绘制轨迹
<强>需求
在一块帆布画布上,初始状态画布什么都没有,现在,我想给画布加一点鼠标事件,用鼠标在画布上写字。具体的效果是鼠标移动到画布上任意一点,然后按住鼠标,移动鼠标的位置,就可以开始写字啦!
<强>原理
先简单分析下思路,首先我们需要一个帆布画布,然后计算鼠标在画布上的位置,给鼠标绑定onmousedown事件和onmousemove事件,在移动过程中绘制出路径,松开鼠标的时候,绘制结束。
这个思路虽然很简单,但是里面有些地方需要小技巧实现。
1,需要一个html文件,包含帆布元素。
这是一个宽800度,高400度的画布。为什么没有写px呢?哦,暂时没搞懂,帆布文档推荐的。
