<!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. JAVA THINGKING （二）随笔

    1. 基本数据员的默认值 Boolean false Char '\u0000'(null) byte (byte)0 short  (short)0 int  0 long 0L float 0.0 ...

  2. 【position】

    background-position 定位的position的区别 background-position 相对的位置是(容器的宽度-子元素的宽度) 当子元素的宽度大于容器的宽度 backgroun ...

  3. Logistic回归 线性回归（转）

    来源: http://www.cnblogs.com/jerrylead 1 摘要 本报告是在学习斯坦福大学机器学习课程前四节加上配套的讲义后的总结与认识.前四节主要讲述了回归问题,回归属于有监督学习 ...

  4. openStack 镜像制作,镜像裁剪一般步骤

    镜像制作一般裁剪步骤 1, linux系统安装CentOs/RHEL Desktop桌面系统,分区划分但分区/挂载点.设置Selinux=disabled关闭iptables安装cloud-init[ ...

  5. facebook chat api 使用

    官方API文档: https://developers.facebook.com/docs/chat/ 下面是根据文档修改的类: <?php class Invite_Chat{ protect ...

  6. MD5 密码加密算法 系统等待

    MD5 密码加密算法 public static String md(String md, String pass) { MessageDigest m; String passok = " ...

  7. Gym 100962J Jimi Hendrix (树形DP)

    题意:给定一棵树,然后每条边有一个字母,然后给定一行字符串,问你能不能从这棵树上找到,并输出两个端点. 析:树形DP,先进行递归到叶子结点,然后再回溯,在回溯的时候要四个值,一个是正着匹配的长度和端点 ...

  8. bzoj 3624: [Apio2008]免费道路【生成树+贪心】

    先把水泥路建生成树,然后加鹅卵石路,这里加的鹅卵石路是一定要用的(连接各个联通块),然后初始化并查集,先把必需的鹅卵石路加进去,然后随便加鹅卵石路直到k条,然后加水泥路即可. 注意判断无解 #incl ...

  9. 第二篇(那些JAVA程序BUG中的常见单词)

    Cannot instantiate the type xxx 无法实例化类型xxx instantiate 实例化

  10. 解题报告：hdu 1073 Online Judge

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1073 Problem Description Ignatius is building an Onli ...