<!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. python 列表，元祖，字典

    一 列表 1 列表的循环遍历 namesList = ['xiaoWang','xiaoZhang','xiaoHua'] for name in namesList: print(name) 结果 ...

  2. javascript base64 编码，兼容ie6789

    用Javascript进行base64编码,在高版本的IE浏览器(IE9以上版本),和firefox,chrome浏览器里是非常方便的.这些浏览器的window对象中内置了base64的编码和解码方法 ...

  3. 洛谷 P1541 乌龟棋 —— DP

    题目:https://www.luogu.org/problemnew/show/P1541 DP. 代码如下: #include<iostream> #include<cstdio ...

  4. hdu2089(数位DP 递推形式)

    不要62 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  5. #!/usr/bin/env ruby 与 #!/usr/bin/ruby 的区别(copy)

    [说明:资料来自http://blog.csdn.net/wh_19910525/article/details/8040494] 脚本语言的第一行,目的就是指出,你想要你的这个文件中的代码用什么可执 ...

  6. Gym 100531A Alarm Clock (水题)

    题意:给定一个被高亮的数,问你是不是有个时间恰好高亮是这个数. 析:直接暴力,直接暴力,枚举每一位时间,当然也可以枚举时间,能找到就是有,找不到就算了. 代码如下: #pragma comment(l ...

  7. fiddler工具使用

    一.安装 a) 百度fiddler ,下载, 安装 ,无脑流 二.界面介绍 a) 工具栏与状态栏 其中保存是,可以为两种形式:1.text文本形式 2.saz文件结尾数据(能被fiddler软件识别) ...

  8. 洛谷 P3952 时间复杂度【模拟】

    把No写成NO,WA了一发-- 现在看这题也不难-- 用一个栈,记一下前面F的字母,是否合法,合法的有多长,每次入栈弹栈即可 #include<iostream> #include< ...

  9. Ocelot（十一）- 服务发现

    Ocelot允许您指定服务发现提供程序,并使用它来查找Ocelot正在将请求转发给下游服务的主机和端口.目前,这仅在GlobalConfiguration部分中受支持,这意味着所有ReRoute将使用 ...

  10. Redis操作命令大全

    一.key pattern 查询相应的key (1)redis允许模糊查询key 有3个通配符  *.?.[] (2)randomkey:返回随机key (3)type key:返回key存储的类型 ...