<!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. Linux设备驱动--块设备（三）之程序设计

    块设备驱动注册与注销 块设备驱动中的第1个工作通常是注册它们自己到内核,完成这个任务的函数是 register_blkdev(),其原型为:int register_blkdev(unsigned i ...

  2. camera摄像原理之四：曝光和GAMMA

    GAMMA:输出/输入(光信号值) 从最明亮到最黑暗,假设人眼能够看到一定的范围,那么胶片(或CCD 等电子感光器件)所能表现的远比人眼看到的范围小的多,而这个有限的范围就是感光宽容度. 人眼的感光宽 ...

  3. 洛谷 P1082 同余方程 —— exgcd

    题目:https://www.luogu.org/problemnew/show/P1082 用 exgcd 即可. 代码如下: #include<iostream> #include&l ...

  4. hdu1026(bfs+优先队列+打印路径)

    Ignatius and the Princess I Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (J ...

  5. Spring IOC 一——容器装配Bean的简单使用

    下文:SpringIOC 二-- 容器 和 Bean的深入理解 写在前面 这篇文章去年写的,缘起于去年某段时间被领导临时"抓壮丁"般的叫过去做java开发,然后在网上找了一个 Sp ...

  6. 【WIP】Objective-C Foundation框架的主要对象

    创建: 2018/02/02 完成字符串: 2018/02/05 任务表: TODO 最新内容确认: 字符串,数据类, 数组类  可变与不变的对象  一览  种类  不变类  可变类  数组  NSA ...

  7. idea运行scala有问题

    报这个错误:java.lang.NoSuchMethodError: scala.Predef$.refArrayOps([Ljava/lang/Object;)Lscala/collection/m ...

  8. 【POJ - 1321】棋盘问题 （dfs）

    棋盘问题 Descriptions: 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋盘 ...

  9. 在Python解释器运行程序

    在解释器中运行  ***.py文件的方法:使用import添加模块 ***.py,然后调用 ***.py中的函数 例:在zoo.py中定义hours函数 运行方法: >>> impo ...

  10. Qt对象模型之一：信号和槽

    一.信号和槽机制概述 信号槽是 Qt 框架引以为豪的机制之一.所谓信号槽,实际就是观察者模式.当某个事件发生之后,比如,按钮检测到自己被点击了一下,它就会发出一个信号(signal).这种发出是没有目 ...