- Miuka【游戏化特训营】图卡23｜设计有趣的课程大纲的两个步骤和四个层级
Miuka喵卡
今天开始的内容，主要聚焦于如何自上而下，从宏观视角触发，把整个课程转化成一个又一个关卡。两个步骤第一步：框架式的关卡基于️教学目标和️课程框架，选用一些更容易的逻辑，构建出很多个关卡第二步：结构化的回合依赖️内容逻辑、️教学流程、️课程能量课程大纲设计的三种工具CANVAS1何用时间轴将课程拆分为一个又一个大模块CANVAS2二维矩阵画布将课程拆分为一个又一个大模块（关卡）CANVAS3结构回合画
- vue项目中图片显示前端使用js添加水印
前端三脚猫
前端canvasvuejscsshtml
需求：在项目中为了防止截图或者下载导致内部图片泄露，或者图片传播溯源，需要将项目中展示的图片添加上属于自己公司的水印标识。解决思路：1、先将img图片绘制为canvas2、使用canva绘制所要自定义添加的内容标识3、再将绘制好的canvas转为base64的地址使用img显示出来代码及步骤注释如下（可以直接看效果显示）：.seamless-warp{height:229px;overflow:h
- canvas2
关耳木南
functiondraw(){varcanvas=document.getElementById("area");//get.Context()方法用来渲染上下文和它的绘画功能，只有一个参数if(canvas.getContext){varctx=canvas.getContext('2d');//填充三角形ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(0,
- 20181105 贝塞尔曲线绘制
Aaron_Alphabet
看到一个数学公式，坐在那里干干看着，一直也不明白，有什么意思，所以就画一下试试。♪(∇*)二次贝塞尔曲线//公式B(t)=(1-t)^2*P0+2*t*(1-t)P1+t^2*P2;t∈[0,1]//P0:startPoint,P1:controlPoint,P2:endPointletfactory=newCanvasCtx('#canvas2');const{ctx,width,height}
- 解决uniapp中使用不了window对象问题(使用renderjs)
LJPchosen1
vueuniapp前端javascriptvue.js
我上网搜索了一下renderjs主要解决的问题renderjs主要服务于APP，因为uni-app为vue+js+html进行编写，整个是h5的技术栈。而app上并没有document等基础对象。那么，涉及到这些的前端类库就无法使用，例如html2、canvas、canvas2、image。而要用这些怎么办，这是用就出现了renderjs这种视图层工具来进行渲染。运行在视图层的jsrenderjs
- h5canvas实现签名(vue)
O蚂蚁O
实现个人签名技术上没那么复杂，只是平时大家用canvas少，实现该需求主要用到的技术点：1、h5新标签canvas2、touchstart事件，touchmove事件，touchend事件，canvas转base64图片的方法toDataURL废话不多说直接上代码清除保存exportdefault{data(){return{isSign:false,signSrc:''}},created(){
- 用canvas绘制微信小程序海报页面并保存相册-适用微信原生
菜鸡爱上编程
uniapp微信小程序小程序
微信小程序绘制海报并保存相册tip：代码中使用的是uni的api如果使用原生微信小程序开发，可以把uni更换成wx使用文章目录微信小程序绘制海报并保存相册前言一、分析需求二、准备数据三、编码开始html部分解析：js部分1、准备好数据后开始绘制解释：2、保存图片解析：总结前言本片文章主要是把我工作中实际用到，可以整合出来的功能，做一个总结和讲解。1、如何使用canvas2、canvas绘制后如何生
- 微信分享图片组件（小程序 ）
BOB_BI
效果图.png需求：点击分享，弹出遮罩层，可分享给好友，可保存图片分享，canvas中的图片自适应（缩放、裁剪）技术：canvas2，vant-weapp-ui思路：计划将整个分享都写成一个自定义组件，由于一些bug，没能实现，部分还是需要写在页面中。share组件:share.wxml分享好友保存图片share.js含有canvas绘制白色背景，canvas文本换行，绘制图片，图片原比例缩小裁剪
- canvas2
Daeeman
canvas简易画板canvas画图板*{padding:0;margin:0;}body{display:flex;justify-content:center;}.options{display:flex;align-items:center;margin-top:20px;}.optionsinput{/*清除input自带的轮廓*/outline:0;margin-left:20px;}.
- Canvas加动画，实现火柴人跳绳效果
HankingHu
Androidandroid可视化
效果涉及到的知识1、canvas2、path和二阶贝塞尔曲线3、bitmap绘制canvas先引用google官方：TheCanvasclassholdsthe"draw"calls.Todrawsomething,youneed4basiccomponents:ABitmaptoholdthepixels,aCanvastohostthedrawcalls(writingintothebitma
- 前端导出 pdf 并且压缩 zip
需求1、前端自定义html模板，导出pdf2、多个pdf导出压缩到一个文件zip里面原理1、html2Canvas将html模板转为canvas2、canvas转为img图片3、生成的图片添加到pdf里面用到的插件html2canvasjspdfjszipfile-saver模板{{row.meetingName}}会议纪要会议主题{{row.meetingTheme}}会议时间{{meeting
- 前端导出 pdf 并且压缩 zip
需求1、前端自定义html模板，导出pdf2、多个pdf导出压缩到一个文件zip里面原理1、html2Canvas将html模板转为canvas2、canvas转为img图片3、生成的图片添加到pdf里面用到的插件html2canvasjspdfjszipfile-saver模板{{row.meetingName}}会议纪要会议主题{{row.meetingTheme}}会议时间{{meeting
- 安卓中遮罩图片的处理
catoop
Android
安卓开发中不可缺少的就是各种图片的圆角，遮罩等等。以前我都是用shape处理的，发现背景图的圆角要设置成和界面父元素背景一样才能看不出现纰漏。当遇到背景多变的情况，比如listview隔行背景颜色不同的情况就郁闷了，又要加一堆代码处理。现在有一个方法可以统一处理，就是用画布Canvas，代码和方法如下：方法步骤说明：1、画布Canvas2、在画布上把要显示的图画上去3、把遮罩图片画上去，盖在要显示
- 微信小程序实现 用canvas 生成图片 并保存
web前端*先森
微信小程序用canvas生成图片
需求：小程序获取到微信头像和昵称，生成2019年随机发生的趣事ui:点击保存生成的图片：实现还是很简单的，直接上代码：html:css:js:1、定义全局canvas2、设置所需要的参数3、获取后台的数据为绘画做准备4、用canvas绘画5、调用上面请求的数据6、保存图片写的不是很好，希望对于新手朋友们有一定的帮助。
- JavaScript动画实例之粒子文本的实现方法详解
1．粒子文本的实现原理粒子文本的实现原理是：使用两张canvas，一张是用户看不到的canvas1，用来绘制文本；另一张是用户看到的canvas2，用来根据canvas1中绘制的文本数据来生成粒子。先在canvas1中用如下的语句绘制待显示的文本。ctx1.font='100pxPingFangSC';ctx1.textAlign='center';ctx1.baseline='middle';c
- 自定义view绘图篇--Paint与Canvas
dev晴天
android
通过自定义view基础我们对自定义view也有所了解啦。然而我们在安卓开发中或许会见过这样的特效：手机管家的清理垃圾、安卓的饼状图、手机直播界面的泡泡上浮（使用到了贝塞尔曲线）。其实这些特效都是自定义view的实现，确切的说是动画+自定义绘图。这里我们就分章节慢慢深入，总结下这些知识点。绘图篇系列1、自定义view绘图篇–Paint与Canvas2、自定义view绘图篇–Canvas的变换3、自定
- vue中实现canvas画布基本操作
聚有时散有期
canvas1线性渐变径向/圆渐变canvas2图片：画布：按钮：重复重复-x重复-y不重复canvas3线圆canvas4实心text空心textcanvas5画布：exportdefault{mounted(){letmyCanvas5=this.$refs.canvasTest5;myCanvas5.width=220;//不可在css或者标签上直接设置画布大小，这样展示的图片会进行拉伸收缩
- JavaScript动画实例：粒子文本
aTeacher
1．粒子文本的实现原理粒子文本的实现原理是：使用两张canvas，一张是用户看不到的canvas1，用来绘制文本；另一张是用户看到的canvas2，用来根据canvas1中绘制的文本数据来生成粒子。先在canvas1中用如下的语句绘制待显示的文本。ctx1.font='100pxPingFangSC';ctx1.textAlign='center';ctx1.baseline='middle';c
- 微信小程序 生成图片分享到朋友圈
sunlihong123
1、canvas2、painter插件https://github.com/Kujiale-Mobile/Painter（git下载地址可以去看详情）shareFriend(){varthat=this;wx.showLoading({title:'图片生成中'})this.setData({imgDraw:{width:'300px',height:'450px',background:"#ff
- HTML5编程百例之一：HTML5时钟
xiaohui1014
webweb
本文主要用到的知识1、Canvas2、三角函数3、JavaScript以上知识学习资源推荐Canvas：https://developer.mozilla.org/en/Canvas_tutorial、http://www.w3.org/TR/2dcontext/三角函数：http://zh.wikipedia.org/zh/%E4%B8%89%E8%A7%92%E5%87%BD%E6%95%B0
- canvas圆圈进度条
山豆山豆
Paste_Image.png*{margin:0;padding:0;}-->window.onload=function(){newProgress().renderOne('canvas1',100,6,10);//id，画布宽和高，圆的半径百分百。newProgress().renderOne('canvas2',100,5,20);newProgress().renderOne('can
- F&C游戏推荐Canvas2～茜色的调色盘～～茜色のパレット～介绍&下载
iteye_20271
《Canvas2～茜色的调色盘～》（Canvas2～茜色のパレット～）是由F&CFC01於2004年4月23日所发售的十八禁恋爱游戏。2006年1月26日，角川书店发行了PS2版《Canvas2～彩虹色的图画～（Canvas2～虹色のスケッチ～）[1]》（CERO15岁以上推荐），同名动画於2005年10月至2006年3月间播映。2006年10月6日，F&CFC01发售《Canvas2～彩虹色的图
- 2.canvas绘制网格以及坐标轴
Rui_cong
canvas学习
html代码：JS代码：varcanvas=document.getElementById('canvas2'),context=canvas.getContext('2d'),axis_margin=40,axis_origin={x:axis_margin,y:canvas.height-axis_margin},axis_top=axis_margin,axis_right=canvas.w
- 根据fabricjs模糊算法，后台用java合成同样效果的模糊效果
silent girl
图片处理图片模糊
1.根据fabricjs模糊算法，后台用java合成同样效果的模糊效果，其中fabricjs模糊算法为：simpleBlur:function(options){varresources=options.filterBackend.resources,canvas1,canvas2,width=options.imageData.width,height=options.imageData.hei
- vue下canvas裁剪图片实例讲解
搜戴斯
由于时间关系代码没有做整理大家有什么不懂得可以留言；代码的主题思路备注中都有大家可以看看我的博客中还有关于canvas绘制矩形的文章有需要的可以看一下；HTML代码：第一行的canvas为裁剪后展示用；div中的canvas存放原有尺寸的图片JS截取图片方法1裁剪方法传参oMark2['canvas1']='canvasImg2';//展示结果canvasidoMark2['canvas2']='
- canvas 的基本用法
雅玲哑铃
一、元素1、写法：您的浏览器不支持canvas2、宽高设置在使用元素时必须设置宽度和高度，指定可以绘画的区域大小，但是宽高设置有一个注意的问题样例代码：canvas{border:5pxsolidred;}varcanvas=document.getElementById("mycanvas");varcontext=canvas.getContext("2d");context.beginPat
- Canvas波浪效果
谭瞎
wave("canvas1",180,"#f9b67e",4000);wave("canvas2",170,'#FF9134',6500);/***底部波浪*@param$canvasIDcanvasID*@param$progress波浪位置的高度*@param$maveColor波浪颜色*@param$time运动周期*/functionwave($canvasID,$progress,$ma
- canvas实现视频播放
谢小逸
Examples点击播放varimgArr=[],source={},now2=0,imgNum=0,timer=null;varcanvas2=document.querySelector('#canvas2');varvideoBox=document.querySelector('.videoBox');varview={w:videoBox.offsetWidth,h:videoBox.o
- 爱心鱼实践 第2章 绘制
王海洋_前端
1、绘制背景main.js脚本已经引入tinyHeart.html中了。假设mian.js里面有很多函数。我们获得了两个画笔，两个画布。下面来分一下，哪些内容放在canvas1上面，哪些在canvas2上面。后面的那个canvas2（z-index:0在后面）：背景，海葵ane，果实前面那个canvas1（z-index:1在前面）：大小鱼，浮动的dust，浮游生物，成绩，吃果实白色圈圈特效，喂小
- H5新特性常用
聆听者JYZ
1.用于绘画的canvas2、媒体回放的video和audio元素3、离线存储更高的支持4、新的标签，之前写页面都是Div+css，代码看起来比较乱，现在h5增加了很多新的标签：article、footer、header、nav、scetion【注意：新的标签和iOS上表达的含义基本一致】5、表单控件：calendar、date、time、amail、url、search.h5出的新特性，和iOS
- scala的option和some
矮蛋蛋
编程scala
原文地址：
http://blog.sina.com.cn/s/blog_68af3f090100qkt8.html
对于学习 Scala 的 Java™ 开发人员来说，对象是一个比较自然、简单的入口点。在 本系列 前几期文章中，我介绍了 Scala 中一些面向对象的编程方法，这些方法实际上与 Java 编程的区别不是很大。我还向您展示了 Scala 如何重新应用传统的面向对象概念，找到其缺点
- NullPointerException
Cb123456
androidBaseAdapter
java.lang.NullPointerException: Attempt to invoke virtual method 'int android.view.View.getImportantForAccessibility()' on a null object reference
出现以上异常.然后就在baidu上
- PHP使用文件和目录
天子之骄
php文件和目录读取和写入php验证文件php锁定文件
PHP使用文件和目录
1.使用include()包含文件
(1)：使用include()从一个被包含文档返回一个值
(2)：在控制结构中使用include()
include_once()函数需要一个包含文件的路径，此外，第一次调用它的情况和include()一样，如果在脚本执行中再次对同一个文件调用，那么这个文件不会再次包含。
在php.ini文件中设置
- SQL SELECT DISTINCT 语句
何必如此
sql
SELECT DISTINCT 语句用于返回唯一不同的值。
SQL SELECT DISTINCT 语句
在表中，一个列可能会包含多个重复值，有时您也许希望仅仅列出不同（distinct）的值。
DISTINCT 关键词用于返回唯一不同的值。
SQL SELECT DISTINCT 语法
SELECT DISTINCT column_name,column_name
F
- java冒泡排序
3213213333332132
java冒泡排序
package com.algorithm;
/**
* @Description 冒泡
* @author FuJianyong
* 2015-1-22上午09:58:39
*/
public class MaoPao {
public static void main(String[] args) {
int[] mao = {17,50,26,18,9,10
- struts2.18 +json,struts2-json-plugin-2.1.8.1.jar配置及问题！
7454103
DAOspringAjaxjsonqq
struts2.18 出来有段时间了！ （貌似是 稳定版）
闲时研究下下！ 貌似 sruts2 搭配 json 做 ajax 很吃香！
实践了下下！ 不当之处请绕过！ 呵呵
网上一大堆 struts2+json 不过大多的json 插件 都是 jsonplugin.34.jar
strut
- struts2 数据标签说明
darkranger
jspbeanstrutsservletScheme
数据标签主要用于提供各种数据访问相关的功能，包括显示一个Action里的属性，以及生成国际化输出等功能
数据标签主要包括：
action ：该标签用于在JSP页面中直接调用一个Action，通过指定executeResult参数，还可将该Action的处理结果包含到本页面来。
bean ：该标签用于创建一个javabean实例。如果指定了id属性，则可以将创建的javabean实例放入Sta
- 链表.简单的链表节点构建
aijuans
编程技巧
/*编程环境WIN-TC*/ #include "stdio.h" #include "conio.h"
#define NODE(name, key_word, help) \ Node name[1]={{NULL, NULL, NULL, key_word, help}}
typedef struct node { &nbs
- tomcat下jndi的三种配置方式
avords
tomcat
jndi(Java Naming and Directory Interface，Java命名和目录接口)是一组在Java应用中访问命名和目录服务的API。命名服务将名称和对象联系起来，使得我们可以用名称
访问对象。目录服务是一种命名服务，在这种服务里，对象不但有名称，还有属性。
tomcat配置
- 关于敏捷的一些想法
houxinyou
敏捷
从网上看到这样一句话：“敏捷开发的最重要目标就是：满足用户多变的需求，说白了就是最大程度的让客户满意。”
感觉表达的不太清楚。
感觉容易被人误解的地方主要在“用户多变的需求”上。
第一种多变，实际上就是没有从根本上了解了用户的需求。用户的需求实际是稳定的，只是比较多，也比较混乱，用户一般只能了解自己的那一小部分，所以没有用户能清楚的表达出整体需求。而由于各种条件的，用户表达自己那一部分时也有
- 富养还是穷养，决定孩子的一生
bijian1013
教育人生
是什么决定孩子未来物质能否丰盛？为什么说寒门很难出贵子，三代才能出贵族？真的是父母必须有钱，才能大概率保证孩子未来富有吗？-----作者：@李雪爱与自由
事实并非由物质决定，而是由心灵决定。一朋友富有而且修养气质很好，兄弟姐妹也都如此。她的童年时代，物质上大家都很贫乏，但妈妈总是保持生活中的美感，时不时给孩子们带回一些美好小玩意，从来不对孩子传递生活艰辛、金钱来之不易、要懂得珍惜
- oracle 日期时间格式转化
征客丶
oracle
oracle 系统时间有 SYSDATE 与 SYSTIMESTAMP；
SYSDATE：不支持毫秒，取的是系统时间；
SYSTIMESTAMP：支持毫秒，日期，时间是给时区转换的，秒和毫秒是取的系统的。
日期转字符窜：
一、不取毫秒：
TO_CHAR(SYSDATE, 'YYYY-MM-DD HH24:MI:SS')
简要说明，
YYYY 年
MM 月
- 【Scala六】分析Spark源代码总结的Scala语法四
bit1129
scala
1. apply语法
FileShuffleBlockManager中定义的类ShuffleFileGroup，定义：
private class ShuffleFileGroup(val shuffleId: Int, val fileId: Int, val files: Array[File]) {
...
def apply(bucketId
- Erlang中有意思的bug
bookjovi
erlang
代码中常有一些很搞笑的bug，如下面的一行代码被调用两次（Erlang beam）
commit f667e4a47b07b07ed035073b94d699ff5fe0ba9b
Author: Jovi Zhang <
[email protected]>
Date: Fri Dec 2 16:19:22 2011 +0100
erts:
- 移位打印10进制数转16进制-2008-08-18
ljy325
java基础
/**
* Description 移位打印10进制的16进制形式
* Creation Date 15-08-2008 9:00
* @author 卢俊宇
* @version 1.0
*
*/
public class PrintHex {
// 备选字符
static final char di
- 读《研磨设计模式》-代码笔记-组合模式
bylijinnan
java设计模式
声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/
import java.util.ArrayList;
import java.util.List;
abstract class Component {
public abstract void printStruct(Str
- 利用cmd命令将.class文件打包成jar
chenyu19891124
cmdjar
cmd命令打jar是如下实现：
在运行里输入cmd，利用cmd命令进入到本地的工作盘符。(如我的是D盘下的文件有此路径 D:\workspace\prpall\WEB-INF\classes)
现在是想把D:\workspace\prpall\WEB-INF\classes路径下所有的文件打包成prpall.jar。然后继续如下操作：
cd D: 回车
cd workspace/prpal
- [原创]JWFD v0.96 工作流系统二次开发包 for Eclipse 简要说明
comsci
eclipse设计模式算法工作swing
JWFD v0.96 工作流系统二次开发包 for Eclipse 简要说明
&nb
- SecureCRT右键粘贴的设置
daizj
secureCRT右键粘贴
一般都习惯鼠标右键自动粘贴的功能，对于SecureCRT6.7.5 ，这个功能也已经是默认配置了。
老版本的SecureCRT其实也有这个功能，只是不是默认设置，很多人不知道罢了。
菜单：
Options->Global Options ...->Terminal
右边有个Mouse的选项块。
Copy on Select
Paste on Right/Middle
- Linux 软链接和硬链接
dongwei_6688
linux
1.Linux链接概念Linux链接分两种，一种被称为硬链接（Hard Link），另一种被称为符号链接（Symbolic Link）。默认情况下，ln命令产生硬链接。
【硬连接】硬连接指通过索引节点来进行连接。在Linux的文件系统中，保存在磁盘分区中的文件不管是什么类型都给它分配一个编号，称为索引节点号(Inode Index)。在Linux中，多个文件名指向同一索引节点是存在的。一般这种连
- DIV底部自适应
dcj3sjt126com
JavaScript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml&q
- Centos6.5使用yum安装mysql——快速上手必备
dcj3sjt126com
mysql
第1步、yum安装mysql
[root@stonex ~]# yum -y install mysql-server
安装结果：
Installed:
mysql-server.x86_64 0:5.1.73-3.el6_5 &nb
- 如何调试JDK源码
frank1234
jdk
相信各位小伙伴们跟我一样，想通过JDK源码来学习Java，比如collections包，java.util.concurrent包。
可惜的是sun提供的jdk并不能查看运行中的局部变量，需要重新编译一下rt.jar。
下面是编译jdk的具体步骤：
1.把C:\java\jdk1.6.0_26\sr
- Maximal Rectangle
hcx2013
max
Given a 2D binary matrix filled with 0's and 1's, find the largest rectangle containing all ones and return its area.
public class Solution {
public int maximalRectangle(char[][] matrix)
- Spring MVC测试框架详解——服务端测试
jinnianshilongnian
spring mvc test
随着RESTful Web Service的流行，测试对外的Service是否满足期望也变的必要的。从Spring 3.2开始Spring了Spring Web测试框架，如果版本低于3.2，请使用spring-test-mvc项目（合并到spring3.2中了）。
Spring MVC测试框架提供了对服务器端和客户端（基于RestTemplate的客户端）提供了支持。
&nbs
- Linux64位操作系统（CentOS6.6）上如何编译hadoop2.4.0
liyong0802
hadoop
一、准备编译软件
1.在官网下载jdk1.7、maven3.2.1、ant1.9.4，解压设置好环境变量就可以用。
环境变量设置如下：
（1）执行vim /etc/profile
（2）在文件尾部加入:
export JAVA_HOME=/home/spark/jdk1.7
export MAVEN_HOME=/ho
- StatusBar 字体白色
pangyulei
status
[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];
/*you'll also need to set UIViewControllerBasedStatusBarAppearance to NO in the plist file if you use this method
- 如何分析Java虚拟机死锁
sesame
javathreadoracle虚拟机jdbc
英文资料：
Thread Dump and Concurrency Locks
Thread dumps are very useful for diagnosing synchronization related problems such as deadlocks on object monitors. Ctrl-\ on Solaris/Linux or Ctrl-B
- 位运算简介及实用技巧（一）：基础篇
tw_wangzhengquan
位运算
http://www.matrix67.com/blog/archives/263
去年年底写的关于位运算的日志是这个Blog里少数大受欢迎的文章之一，很多人都希望我能不断完善那篇文章。后来我看到了不少其它的资料，学习到了更多关于位运算的知识，有了重新整理位运算技巧的想法。从今天起我就开始写这一系列位运算讲解文章，与其说是原来那篇文章的follow-up，不如说是一个r
- jsearch的索引文件结构
yangshangchuan
搜索引擎jsearch全文检索信息检索word分词
jsearch是一个高性能的全文检索工具包，基于倒排索引，基于java8，类似于lucene，但更轻量级。
jsearch的索引文件结构定义如下：
1、一个词的索引由=分割的三部分组成： 第一部分是词 第二部分是这个词在多少
