<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>demo02 pc端米字格画布</title>

    <link rel="stylesheet" href="css/canvas.css">

    <script src="scripts/jquery-1.7.1.min.js"></script>

<style>

</style>

</head>

<body>

<canvas id="canvas">您的浏览器不支持canvas</canvas>

<div id="controller"><div class="op_btn" id="clear_btn"> 清除</div></div>

<script src="scripts/canvas.js"></script>

</body>

</html>
 var canvasWidth = 800;

 var canvasHeight =canvasWidth;

 var isMouseDown = false;

 var lastLoc ;

 // var lastLoc = {x:0,y:0};

 var curTimestamp;

 var lastTimestamp = 0;

 var lineWidth;

 var canvas = document.getElementById('canvas');

 var context = canvas.getContext('2d');

 canvas.width = canvasWidth;

 canvas.height = canvasHeight;

 drawGrid();

 $('#clear_btn').click(function(){

     context.clearRect(0,0,canvasWidth,canvasHeight);

     drawGrid();

 })

 canvas.onmousedown = function(e){

     e.preventDefault();

     isMouseDown = true;

     // console.log("mouse down!");

     lastLoc = windowToCanvas(e.clientX,e.clientY);

     lastTimestamp = new Date().getTime();

     // alert(loc.x+","+loc.y);

 }

 canvas.onmouseup = function(e){

     e.preventDefault();

     isMouseDown = false;

     // console.log("mouse up~~~");

 }

 canvas.onmouseout = function(e){

     e.preventDefault();

     isMouseDown = false;

     // console.log("mouse out~~");

 }

 canvas.onmousemove = function(e){

     e.preventDefault();

     // isMouseDown = true;

     if (isMouseDown) {

         // console.log("mouse move");

         var curLoc = windowToCanvas(e.clientX,e.clientY);

         var s = calcDistance(curLoc , lastLoc);

         var t = curTimestamp - lastTimestamp;

         context.beginPath();

         context.moveTo(lastLoc.x , lastLoc.y);

         context.lineTo( curLoc.x , curLoc.y);

         context.strokeStyle = 'black';

         context.lineWidth = 20;

         context.lineCap="round"

         context.lineJoin = "round"

         context.stroke();

         lastLoc = curLoc;

         curTimestamp = lastTimestamp;

         lastLineWidth = lineWidth;

     };

 }

 var maxLineWidth = 30;

 var minLineWidth = 1 ;

 var maxStrokeV = 10;

 var minStrokeV = 0.1;

 function calcLineWidth(t,s){

     var v = s/t;

     var resultLineWidth;

     if ( v <= minStrokeV)

         resultLineWidth = maxLineWidth;

     else if( v >= maxStrokeV)

         resultLineWidth = minLineWidth;

     else

         resultLineWidth = maxLineWidth - (v-minStrokeV )/(maxStrokeV-minStrokeV)*(maxLineWidth-minLineWidth)

     if (lastLineWidth == -1) {

         return resultLineWidth;

     };

     return resultLineWidth*2/3 + resultLineWidth*1/3;

 }

 function calcDistance(loc1 , loc2){

     return Math.sqrt((loc1.x - loc2.x)*(loc1.x - loc2.x) + (loc1.y - loc2.y)*(loc1.y - loc2.y));

 }

 function windowToCanvas(x,y){

     var bbox = canvas.getBoundingClientRect();

     return {x:Math.round(x-bbox.left),y:Math.round(y-bbox.top)};

 }

 function drawGrid(){

     context.save();

 context.strokeStyle = "rgb(230,11,9)";

 context.beginPath();

 context.moveTo(3,3);

 context.lineTo(canvasWidth - 3 , 3 );

 context.lineTo(canvasWidth - 3 , canvasHeight - 3 );

 context.lineTo(3 , canvasHeight - 3  );

 context.closePath();

 context.lineWidth = 6;

 context.stroke();

 context.beginPath();

 context.moveTo(0,0);

 context.lineTo(canvasWidth,canvasHeight);

 context.moveTo(canvasWidth,0);

 context.lineTo(0,canvasHeight);

 context.moveTo(canvasWidth/2,0);

 context.lineTo(canvasWidth/2,canvasHeight);

 context.moveTo(0,canvasHeight/2);

 context.lineTo(canvasWidth,canvasHeight/2);

 context.lineWidth = 1;

 context.stroke();

 context.restore();

 }

H5 canvas pc 端米字格 写字板的更多相关文章

  1. 社交系统/社群系统“ThinkSNS+”H5及PC端终于来了！一起来“找茬”

    [什么是TS+?] ThinkSNS(简称TS),一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方案,目前最新版本为ThinkSNS+,简称TS+. 还记得2017年 ...

  2. 关于H5从PC端切换到移动端，屏幕显示内容由横向转为竖向的研究！

    1.前言: 在项目中,我们常会遇见在手机端需要横屏观看的效果,而在pc端则默认切换到竖屏的样式. 或者是,UI提供的图是一个长图,但是在移动端我们需要让这个图在手机横屏时显示. 以上两个都需要我们实行 ...

  3. 实现pc端信纸留言板

    效果如图: 我好像在哪里见过这样的形式,但却从来没有想过怎么实现,有种莫名的兴奋感.怎么控制什么时候换行,怎么控制中间的线条,这些视乎都是CSS无法实现的,我陷入了死局.寻找JS的做法,JS的挺复杂的 ...

  4. canvas做的一个写字板

    <!DOCTYPE html><html><head><title>画板实验</title> <meta charset=" ...

  5. canvas h5制作写字板

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <script type ...

  6. H5测试与PC端测试不同的点

    1.通过H5网页(非手机的返回功能)的返回功能可以返回,不会出现无法返回的情况. 2.横屏竖屏相互切换,能自适应,并且布局不会乱掉: 3.为能在不同分辨率的手机上能更好的展示,建议采用响应式设计(如: ...

  7. h5微信页面在手机微信端和微信web开发者工具中都能正常显示，但是在pc端微信浏览器上打不开（显示空白）

    h5微信页面在手机微信和微信开发者工具中都能正常显示,但是在pc端微信浏览器上打不开或者数据加载不出来. 原因:pc端微信浏览器不支持ES6语法,我的代码中使用了一些ES6的特性 解决:将ES6转换为 ...

  8. html5之canvas画图 1.写字板功能

     写字板事例:       写字板分析:1.点击鼠标開始写字(onmosedown)2.按下鼠标写字(onmousemove)3.松开鼠标,停下写字(撤销onmousemove事件):       代 ...

  9. 前端：微信支付和支付宝支付在pc端和h5页面中的应用

    1:h5微信支付 使用的是https://pay.weixin.qq.com/wiki/doc/api/index.html  中的 (1):公司需要首先要配置公众号微信支付地址和测试白名单(支付的时 ...

随机推荐

  1. 并不对劲的Loj6031:「雅礼集训 2017 Day1」字符串

    题目传送门:-> 看到题目的第一反应当然是暴力:对于串s建后缀自动机,每次询问中,求w对应的子串在s的SAM中的right集合.O(qmk)听上去显然过不了. 数据范围有个∑w<=1e5, ...

  2. hdu3709 (平衡数) 数位DP

    Balanced Number Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others) ...

  3. ubuntu 12.04上安装QQ2013(转载)

    转自:http://www.cnblogs.com/wocn/p/linux_ubuntu_QQ_install.html 环境介绍: OS:Ubuntu12.04 64bit QQ:WineQQ20 ...

  4. IDE工具的[多行光标编辑模式]

    Sublime Text3:Ctrl+Alt+上下键 Eclipse:Shift+Alt+A,进入退出多光标模式 IDEA:Shift + ctrl + alt + 鼠标左键 收集链接 IDEA:ht ...

  5. Postgresql个人维护库时，出现有用户在连接又找不到这个用户是谁的强制中断连接的方法；

    方法一: 去PostgreSQL目录下/data/pgdata/9.4,找到pg_hba.conf, 修改pg_hba.conf的白名单IP (修改前,最好服务已停止,我是这么操作的) # IPv4 ...

  6. HDU1072:Nightmare [DFS]

    题目链接:Nightmare 题意: 给出一张n*m的图,0代表墙,1代表可以走,2代表起始点,3代表终点,4代表炸弹重置点 问是否能从起点到达终点 分析: 一道很好的DFS题目,炸弹重置点必然最多走 ...

  7. bzoj 3609: [Heoi2014]人人尽说江南好【博弈论】

    参考:https://blog.csdn.net/Izumi_Hanako/article/details/80189596 胜负和操作次数有关,先手胜为奇,所以先手期望奇数后手期望偶数,最后一定能达 ...

  8. bzoj 4568: [Scoi2016]幸运数字【树链剖分+线段树+线性基】

    一眼做法,好处是好想好写坏处是常数大,容易被卡(bzoj loj 洛谷开O2 能AC,不开有90分-- 大概就是树剖之后维护线段树,在线段树的每个节点上上维护一个线性基,暴力\( 60^2 \)的合并 ...

  9. #undef及其用法

    简    介 在后面取消以前定义的宏定义 在此程序中,我们将取消在先前程序中对预处理器的定义. #include <stdio.h> int main( void ) { #define ...

  10. git基本操作（入门）

    下面以一个最简单的开发过程,呈现git最基本的操作命令 1.下载代码(以code命名仓库为例) git clone xxxxx/code.git cd code 2.查看所有分支 git branch ...