web前端开发
web前端开发学习。
软件硬化工程师
这个作者很懒,什么都没留下…
展开
-
web前端入门(四)-canvas图形拖拽事件
概述 在 canvas 中绘制图形后,可以给 canvas 添加事件响应函数,并判断事件是否发生在canvas内部所绘制的图形中,从而给 canvas 中绘制图形添加事件处理。 很多情况下有鼠标拖拽图形的需求,如果是单个图形、不重叠图形,鼠标拖拽功能还较易实现。但在 canvas 中有图形存在重叠的情况下,鼠标点击的图形以及绘制区域的清除等操作,都不容易实现。此文首先讲解基本的鼠标拖拽功能...原创 2020-03-12 12:23:52 · 2481 阅读 · 0 评论 -
web前端入门(三)-canvas添加事件响应
html 中添加 canvas 元素后,可以给 canvas 元素添加 mousedown、mousemove等等事件响应函数,从而处理 canvas 事件。 然而,在 canvas 中绘制图形后,无法单独监听各图形的事件,只能在 canvas 事件响应函数中,判断鼠标是否在绘制的图形内,从而对各图形执行相应的事件操作。 function drawArc(x,y,rOut,rIn,s,e,ctx)...原创 2020-03-11 10:40:06 · 1408 阅读 · 0 评论 -
web前端入门(一)
浏览器自带 js 基本库,在 html 文件中直接写 js 语句,浏览器即可执行; jQuery 是 js 库,需要下载并导入到html文件中。在 html 中,使用 <script type="text/script" src="path" >引入 js 库; div横排放置顶端对齐问题 –左右两个 div 都设置为 float:left,如果右边div没有设置宽度,右边div的宽...原创 2020-03-09 17:10:09 · 229 阅读 · 0 评论 -
web前端入门(二)-canvas绘图
1.canvas中绘制的图形,坐标都是相对于canvas元素的左上角坐标,canvas左上角为(0,0)坐标点。如下图中,中绘制了个矩形,该矩形左上角相对于 canvas 的左边距为 W2 ,上边距为 H2,则该矩形左上角顶点坐标为(W2,H2)。 2.使用 rotate 旋转坐标时,默认以 canvas 的 左上角为中心点。例如要使绘制的矩形绕矩形中心点旋转,如果直接使用 var canvas...原创 2020-03-10 18:58:57 · 1541 阅读 · 0 评论