-
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
所属栏目:[MySql教程] 日期:2020-09-23 热度:121
接上一篇canvas画线条教程 上次我们讲到,canvas有时候会出现1像素的线条模糊不清且好像更宽的情况,如下图: 这样的线条显然不是我们想要的。 这篇文章的目的就是弄清楚里面的原理,以及解决它。 大家都知道屏幕上最小的显示尺寸就是1像素,虽然小于1像素[详细]
-
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
所属栏目:[MySql教程] 日期:2020-09-23 热度:122
副标题#e# var cvs = document.getElementById('cvs'); //画布 var ctx = cvs.getContext('2d'); // 画笔 我们画画的时候,落笔点是不固定的,随时都会变。canvas虽然不是通过手来决定落笔点,但也有一个方法,就是moveTo。moveTo的作用相当于把笔尖提离画布[详细]
-
html5 Canvas画图教程(1)—画图的基本常识
所属栏目:[MySql教程] 日期:2020-09-23 热度:79
虽然大家都称Canvas为html5的新标签,看起来好像Canvas属于html语言的新知识,但其实Canvas画图是通过javascript来做的。所以,如果你想学习Canvas画图,你必须要有Javascript基[详细]
-
使用html5+css3来实现slider切换效果告别javascript+css
所属栏目:[MySql教程] 日期:2020-09-23 热度:131
好吧,上次说要赶紧的补上几篇文章,结果淡定的失约了。又是近一个月才发一篇,真是让人郁闷。发现最近总是抽不出时间了,基本都是一个项目接一个项目的安排,自己不是在空闲的时候找不到合适的话题,就是在有纠结话题的时候抽不出时间了。所以我决定一段时[详细]
-
html5 canvas-2.用canvas制作一个猜字母的小游戏
所属栏目:[MySql教程] 日期:2020-09-23 热度:150
今天我们要用canvas制作一个猜字母的小游戏,先来张效果图。 游戏设计很简单,系统会随机从a-z的26个字母中选择一个保存起来,你键盘输入一个字母,系统会提示你正确字符比你当前输入字母小还是大,直到你输入正确的字母游戏才结束。 下面介绍js代码中需要[详细]
-
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
所属栏目:[MySql教程] 日期:2020-09-21 热度:94
在canvas中可以很方便的用arc方法画出圆形,本来圆形也可以看作是一个宽高相等的椭圆,但canvas中根本没有画椭圆的方法,我们要用其他方法来模拟。 我们首先要明确画一个椭圆需要那些参数,基本的几何知识告诉我们,椭圆需要圆心坐标,宽度,高度或者还有旋[详细]
-
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
所属栏目:[MySql教程] 日期:2020-09-21 热度:121
继续讲canvas中画曲线的方法,今天讲quadraticCurveTo。 说实话这个方法有点吓人,单从函数名称上都可以初体验。话说,我觉得有必要把这个函数名缩短。 quadratic的意思是二次,即数学中二次元方程那个二次。而ctx.quadraticCurveTo的参数如下: 复制代码[详细]
-
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
所属栏目:[MySql教程] 日期:2020-09-21 热度:186
在canvas画线条这篇文章中,我讲了画直线的方法,按理这篇画曲线的文章早该发了,但由于canvas画曲线比较特殊,我还没摸透,所以要一步步尝试。 canvas里画曲线的难点之一,就在于他连曲线的函数就有4个!分别是arc,arcTo,quadraticCurveTo,bezierCurveTo.[详细]
-
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
所属栏目:[MySql教程] 日期:2020-08-24 热度:144
使用HTML5Web存储的localStorage和sessionStorage方式进行Web页面数据本地存储。 页面参考如下图,能将页面上的数据进行本地存储。并能读取存储的数据显示在页面上。 localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长[详细]
-
AmazeUI 网格的实现示例
所属栏目:[MySql教程] 日期:2020-08-19 热度:162
!doctype htmlhtml class=no-jsheadmeta charset=utf-8meta http-equiv=X-UA-Compatible content=IE=edgemeta name=description content=meta name=keywords content=meta name=viewport content=width=device-width, initial-scale=1title网格/titlemeta[详细]
-
清除canvas画布内容(点擦除+线擦除)
所属栏目:[MySql教程] 日期:2020-08-19 热度:111
副标题#e# 由于canvas每当高度或宽度被重设时,画布内容就会被清空,因此可以用以下方法清空:(此方法仅限需要清除全部内容的情况) var c=document.getElementById(myCanvas); c.width=c.width; 2、clearRect var c=document.getElementById(myCanvas);va[详细]
-
canvas小画板之平滑曲线的实现
所属栏目:[MySql教程] 日期:2020-08-19 热度:62
项目需求:需要实现一个可以自由书写的小画板 简单实现 对于熟悉canvas的同学来说,这个需求很简单,大致逻辑如下: 1)监听事件pointerdown,pointermove,pointerup 2)标记是否拖拽画线模式变量 isDrawing,在down事件时置为true,up的时候置为false 3[详细]
-
数据库分库分表后,带来的这个难题,如何解决?
所属栏目:[MySql教程] 日期:2020-08-17 热度:165
在此之前我们介绍了数据库的分库分表问题,分库分表可以给我们带来非常好的扩展性与性能上的提升,但也随之带来一些问题,例如数据的主键ID分配问题。我们以Mysql为例,通常我们使用的是数据库的自增主键,我们在分表的时候也尽量保证业务上不需要跨表查询[详细]
-
html5视频自动横过来自适应页面且点击播放功能的实现
所属栏目:[MySql教程] 日期:2020-08-15 热度:193
本代码适用于1920*1080的视频,如果是其他尺寸的视频,需要更改js代码里的几个数字,重新计算视频宽高 效果图 如图所示, 在长屏手机里,横过来的视频高度充满,宽度自适应后居中; 在短屏手机里,横过来的视频宽度充满,高度自适应后居中; 代码HTML !--[详细]
-
为什么我们要从MySQL迁移到TiDB?
所属栏目:[MySql教程] 日期:2020-08-15 热度:200
副标题#e# 【金融特辑】光大****科技部DBA女神带你从0到1揭秘MGR 【51CTO.com原创稿件】当一张百亿数据量的表放在你面前,你将面临着什么?加列?哭吧,怎么也得等个几天甚至几周。加索引?哭吧,不论你用 pt-online-schema,还是 gh-ost,你都面临着拷贝一张[详细]
-
万字分享,我是如何一步一步监控公司MySQL的?
所属栏目:[MySql教程] 日期:2020-08-15 热度:160
副标题#e# 写在前边 在家远程办公第三周,快被手机上的消息搞的有些神经质了,生怕错过一条有用的信息,没办法形势如此,公司摇摇欲坠大家也都如履薄冰,毕竟这时候失业有点惨(穷怕了)。 但就干活来说还是比较清闲的,和在公司上班相比,清闲下来很多碎片[详细]
-
Html5导航栏吸顶方案原理与对比实现
所属栏目:[MySql教程] 日期:2020-06-17 热度:108
市场上享有H5导航栏吸顶效果展示 1.淘宝聚划算吸顶演示: 2.淘宝百亿补贴吸顶演示: 二. 常见的tabbar吸顶方案 基于position粘性定位的吸顶方案 基于JS监听scroll事件的吸顶方案 三. 方案的原理与对比 1. position粘性方案的实现与详解 1.1. 知识详解 posi[详细]
-
浅析图片上传及canvas压缩的流程
所属栏目:[MySql教程] 日期:2020-06-17 热度:152
我们通常在做图片上传的时候都会遇上这样的情况,一是后端接口限制上传图片的大小,或者是即使后端没有限制大小,因为图片太大在前端渲染时太慢,造成页面加载体验较差。因此我们很有必要对上传的图片进行压缩。 本文在gitthub做了收录:github.com/Michae[详细]
-
原生canvas制作画图小工具的踩坑和爬坑
所属栏目:[MySql教程] 日期:2020-06-17 热度:98
副标题#e# 最近在写一个类似截图里的简易画图的小工具,画线,画矩形,画圆,可以选择颜色,就像这样 写的过程中遇到了一些坑,还好爬出来了,也得到几位大佬的指点,稍微接触了一下zrender,在这里记录一下。 坑1,绘制过程的预览 用canvas画线没什么问题[详细]
-
h5移动端调用支付宝、微信支付的实现
所属栏目:[MySql教程] 日期:2020-06-17 热度:152
公司项目之前已有支付宝支付,现要求增加微信支付,第一次做,摸着石头过河!结果是满意的。 废话就不说了直接上代码: var aliChannel = null;var wxChannel = null;// 定义支付方式切换var state_type = 1;// 选择支付方式 默认为支付宝样式$(.zfb).find[详细]
-
使用SVG实现提示框功能的示例代码
所属栏目:[MySql教程] 日期:2020-06-17 热度:94
副标题#e# NO.1 前言 Tooltips常被称为提示框(或信息提示框),提示框能够以较强的交互性、自由度为用户提供相应的提示信息。今天我们要聊的不是如何实现强大的交互行为,而是来看看如何以最好的方式来还原他们的视觉效果,并且能适用于不同的场景。 NO.2[详细]
-
Html5嵌入钉钉的实现示例
所属栏目:[MySql教程] 日期:2020-06-17 热度:140
1,需要在项目种引入钉钉官方的js script type=text/javascript src=http://www.jb51.net/html5/http:/g.alicdn.com/dingding/dingtalk-jsapi/2.3.0/dingtalk.open.js /script 或者npm 也可以的 2,钉钉自带的api,有写是需要鉴权的,所以在使用之前一定要[详细]
-
HTML5页面无缝闪开的问题及解决方案
所属栏目:[MySql教程] 日期:2020-06-17 热度:176
副标题#e# 在传统的 web 优化中,我们可以采取压缩、拆包、动态加载等方法减少首屏资源大小,也能通过离线包、页面直出等方案加速 html 返回,之前一篇h5 秒开大全有部分简析。在大部分场景中,这些方案都足够用,也能得到出色的效果。但仍有两种无法尽善尽[详细]
-
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
所属栏目:[MySql教程] 日期:2020-06-17 热度:180
一、通常我们在存储数据的方式有三种 cookie sessionstorage localstorage ,那么这三种数据的存储又有什么关系呢?让我们一起来看看吧 cookie:保存cookie值: var dataCookie='110';document.cookie = 'token' + = +dataCookie; 获取指定名称的cookie值 f[详细]
-
h5页面唤起app如果没安装就跳转下载(iOS和Android)
所属栏目:[MySql教程] 日期:2020-06-17 热度:153
h5页面唤起app如果没安装就跳转下载(iOS和Android) 浏览器和app没有通信协议,所以h5不知道用户的手机释放安装了app。因此只能是h5去尝试唤起app,若不能唤起,引导用户去下载我们的app。 微信里屏蔽了 schema 协议,如果在微信中打开h5,则会提示用户在浏[详细]