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