canvas | 易学教程

android 自定义日历控件

阅读更多关于 android 自定义日历控件

日历控件View： [java] view plain copy print ? /** * 日历控件功能：获得点选的日期区间 * */ public class CalendarView extends View implements View.OnTouchListener { private final static String TAG = "anCalendar"; private Date selectedStartDate; private Date selectedEndDate; private Date curDate; // 当前日历显示的月 private Date today; // 今天的日期文字显示红色 private Date downDate; // 手指按下状态时临时日期 private Date showFirstDate, showLastDate; // 日历显示的第一个日期和最后一个日期 private int downIndex; // 按下的格子索引 private Calendar calendar; private Surface surface; private int[] date = new int[ 42]; // 日历显示数字 private int curStartIndex, curEndIndex; //

HTML canvas中 arcTo()的使用方法

阅读更多关于 HTML canvas中 arcTo()的使用方法

HTML canvas中 arcTo()的使用方法 attTo定义: 创建一个介于两个切线之间的弧度 attTo的用法: artTo(x1,y1,x2,y2,r) artTo(400,150,400,350,300)* 参数值: x1:弧度的起点的横坐标X1。 y1:弧度的起点的纵坐标Y1。 x2:弧度的终点的横坐标X2。 y2:弧度的终点的纵坐标Y2。 r:*弧度的半径r。代码如图: 实现效果下图所示 : 来源： CSDN 作者： ㅤㅤ ㅤㅤ 链接： https://blog.csdn.net/m0_46532221/article/details/104798670

H5的canvas绘图技术

阅读更多关于 H5的canvas绘图技术

H5的canvas绘图技术 canvas元素是HTML5中新添加的一个元素，该元素是HTML5中的一个亮点。Canvas元素就像一块画布，通过该元素自带的API结合JavaScript代码可以绘制各种图形和图像以及动画效果。 1.1 浏览器不兼容问题 ie9以上才支持canvas, 其他chrome、firefox、苹果浏览器等都支持只要浏览器兼容canvas，那么就会支持绝大部分api(个别最新api除外) 移动端的兼容情况非常理想，基本上随便使用 2d的支持的都非常好，3d（webgl）ie11才支持，其他都支持如果浏览器不兼容，最好进行友好提示，提示内容只有在浏览器不支持时才显示。 //例如： <canvas id="cavsElem"> 你的浏览器不支持canvas，请升级浏览器 </canvas> 浏览器不兼容，也可以使用flash等手段进行优雅降级 1.2 创建画布在页面中创建canvas元素与创建其他元素一样，只需要添加一个<canvas>标记即可。该元素默认的宽高为300*15，可以通过元素的width属性和height属性改变默认的宽高。注意：不能使用CSS样式控制canvas元素的宽高，否则会导致绘制的图形拉伸。重新设置canvas标签的宽高属性会导致画布擦除所有的内容。可以给canvas画布设置背景色 1.3 canvas坐标系

Html5 loading 来了

阅读更多关于 Html5 loading 来了

Html5在移动设备上表现抢眼，几乎所有稍微高端一点的设备（乔帮主的iPad，iPhone和Andriod的平板手机等）的浏览器都支持Html5。而且据我个人的测试这些支持html5的设备对canvas标签的支持是相当的好。所以就看了一点html5的东东，并研究了一下canvas标签的用法。如果你从来没有用过canvas标签，请参考 Html5 canvas cheat sheet 。大家都知道web2.0以来大量的使用ajax，loading的小图标也有很多很多种，甚至还有专门提供loading图片的网站。所以我就想能不能让html5解决一下这个以前用gif文件解决的问题。没想到非常的简单，只用了不到一小时的时间就搞定了两个，而且这样做出来的loading图标是可定制的，既可以定制颜色，也可以定制大小等属性。废话少叙，我们先来看下这两个loading图标的效果，注意，如果你用的是PC，请使用Firefox，Opera或者IE9看此效果。第一个带着小尾巴转动的loading图标画图的思路是，首先画一个圆，然后在圆的边上按顺序画大小逐渐减小的小圆点，在每次刷新画布时改变这一系列的小圆点在大圆边上的位置。 <!doctype html> <html> <head> <meta http-equiv="content-type" content="GBK"/> <title

web前端入门（二）-canvas绘图

阅读更多关于 web前端入门（二）-canvas绘图

1.canvas中绘制的图形，坐标都是相对于canvas元素的左上角坐标，canvas左上角为（0，0）坐标点。如下图中，中绘制了个矩形，该矩形左上角相对于 canvas 的左边距为 W2 ,上边距为 H2，则该矩形左上角顶点坐标为（W2,H2）。 2.使用 rotate 旋转坐标时，默认以 canvas 的左上角为中心点。例如要使绘制的矩形绕矩形中心点旋转，如果直接使用 var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.rotate（30）表示以canvas左上角为原点旋转30度，在此坐标轴上绘制出的矩形如图所示。 canvas原始坐标轴直接旋转的坐标轴如果要转换中心点，需要先使用 translate（W2+R/2,H2+R/2）转换中心点，然后在该中心点使用 rotate 旋转坐标，最后在旋转后的坐标系上，绘制图形。 canvas转移坐标轴旋转坐标轴来源： CSDN 作者：软件硬化工程师链接： https://blog.csdn.net/mrbbcool/article/details/104778496

Js逆向-滑动验证码图片还原

阅读更多关于 Js逆向-滑动验证码图片还原

本文列举两个例子：某象和某验的滑动验证一、某验： aHR0cHM6Ly93d3cuZ2VldGVzdC5jb20vZGVtby9zbGlkZS1mbG9hdC5odG1s 未还原图像: 还原后的图: 从服务端请求来的图片是打乱后的，给用户看的时候是完整的，这个过程肯定是运行了某段js代码，将打乱的图片进行还原操作。所以我们需要找到这段js，然后还原它的代码逻辑，实现图片的还原操作，找到缺口距离，实现滑动操作。如果你仔细观察的话，你会发现还原后的图它是canvas生成出来的那你应该会想到，那段js中会生成canvas，然后使用它下面的一些方法，实现图片的还原操作，所以我们需要知道他啥时候生成canvas，找到位置，然后慢慢往下调试，找到还原代码。这时我们就需要使用油猴插件，进行hook了。如果对油猴不了解的同学，可以谷歌百度下，学习下，这是非常有用的，代码如下: // ==UserScript== // @name hook createElement // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author 朱宇 // @match *://*/* // @grant none // ==/UserScript==

HTML canvas画布

阅读更多关于 HTML canvas画布

设置一个画布<canvas id="mycanvas" accesskey="o" width="1000" height="1000"></canvas> 获取canvas对象，接下来我们就可以进行操作了 var c = document.getElementById("mycanvas"); var ctx = c.getContext("2d"); 画线 //用于画线 ctx.moveTo(90, 90);//起始点 ctx.lineTo(180, 190);//结束点 ctx.stroke();//绘画（个人理解） //用于画线写字 //用于写字 ctx.fillStyle ="blue";//字体颜色 ctx.font = "30px Arial";//字体样式 ctx.fillText("道德经", 400, 400);//实心文字 ctx.strokeStyle = "red";//空心字体边框颜色 ctx.shadowBlur = 10;//阴影 ctx.shadowColor = "black";//阴影颜色 ctx.strokeText("论语", 450, 450);//空心文字 ctx.fillStyle = "orange";//字体颜色 ctx.fillText("论语", 450, 450);//实心文字 //用于写字画矩形 var grd =

canvas画板多端实现

阅读更多关于 canvas画板多端实现

目录移动端实现小程序端实现方式创建时间： 2020-03-09；测试：chrome v80.0.3987.122 正常 | 小程序 2.10.2 正常 PC端演示移动端实现 body{margin:0;overscroll-behavior-y: contain;} .draw-board { width: 100%; height: 300px; background-color: rgb(213, 252, 245); } html代码 <canvas id="drawBoard" class="draw-board" height="300px"></canvas> <div> <button onclick="handleClear()">清除</button> </div> js 代码 /* 实测利用贝塞尔曲线画的线在 lineWidth 较小时，效果与当前方法基本相当 */ let mouseDown = false; const canvas = document.getElementById('drawBoard'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; const rect = canvas.getBoundingClientRect(); /**

[Android] Android 锁屏实现与总结（三）

阅读更多关于 [Android] Android 锁屏实现与总结（三）

上接： Android 锁屏实现与总结（二）系列文章链接如下： [Android] Android 锁屏实现与总结（一） [Android] Android 锁屏实现与总结（二） [Android] Android 锁屏实现与总结（三）代码文件地址： https://github.com/wukong1688/Android-BaseLockScreen 3、按键的屏蔽当自定义锁屏页最终出现在手机上时，我们希望它像系统锁屏页那样屹立不倒，所有的按键都不能触动它，只有通过划屏或者指纹才能解锁，因此有必要对按键进行一定程度上的屏蔽。针对只有虚拟按键的手机，我们可以通过隐藏虚拟按键的方式部分解决这个问题。但是当用户在锁屏页底部滑动，隐藏后的虚拟按键还是会滑出，而且如果用户是物理按键的话就必须进行屏蔽了。需要重写Activity的onBackPressed()方法即可。 public boolean onKeyDown(int keyCode, KeyEvent event) { int key = event.getKeyCode(); switch (key) { case KeyEvent.KEYCODE_BACK: { return true; } case KeyEvent.KEYCODE_MENU: { return true; } } return super

【微信小程序】canvas实现涂鸦板功能

阅读更多关于【微信小程序】canvas实现涂鸦板功能

< style > .container { height: 100% ; box-sizing: border-box ; } page { height: 100% } .container { width: 100% ; height: 100% ; position: relative } .canvas_area { width: 100% ; height: 100% ; background: #e0ffff } .myCanvas { width: 100% ; height: 100% } .canvas_tools { width: 100% ; height: 100rpx ; position: fixed ; left: 0 ; bottom: 20rpx ; display: flex ; flex-direction: row ; justify-content: space-around ; } .box { width: 100rpx ; height: 100rpx ; background: rebeccapurple ; border-radius: 50% ; } .box1 { width: 60rpx ; height: 60rpx } .box3 { background-color: #cc0033 } .box4 {

订阅 canvas