<!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 Copy文件到本机 界面化操作

    1.安装SSHSecureShellClient 2.打开 3.设置1,然后打开2就可以操作了

  2. Struts2中怎样配置struts。xml?

    <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE struts PUBLIC "-/ ...

  3. 【POJ 2152】 Fire

    [题目链接] 点击打开链接 [算法] 同样是树形DP,但是比较难,笔者做这题看了题解 令f[i][j]表示在以i为根的子树中 1.在以i为根的子树中建一些消防站 2.在节点j必须建一个消防站 3.以i ...

  4. 如何编写linux下nand flash驱动-2

    [Nand Flash引脚(Pin)的说明] 图3.Nand Flash引脚功能说明 上图是常见的Nand Flash所拥有的引脚(Pin)所对应的功能,简单翻译如下: 1.       I/O0 ~ ...

  5. 彻底解决SysFader:IEXPLORE.EXE应用程序错误

    彻底解决SysFader:IEXPLORE.EXE应用程序错误 转载于 西部e网(weste.net) 最近安装了IE8浏览器玩玩,但是发现一个严重的问题,就是在访问某些页面的时候,经常会出现“ysF ...

  6. C语言的随机发牌程序(红桃、黑桃、梅花、方块)

    做一个随机发牌的C语言程序,供大家学习,思考. 未做任何注释,有测试时候留下的一些输出语句,一遍方便测试. /* author:nunu qq:398269786 */ #include<std ...

  7. 深入学习Ajax

    1.什么是Ajax? AJAX的全称是Asynchronous Javascript And XML (异步的JavaScript和XML).是一种在无需重新加载整个网页的情况下,能够更新部分网页的技 ...

  8. 比特币搬砖对冲策略Python源码

    策略复制地址:https://www.fmz.com/strategy/21023 策略原理 比特币搬砖策略是入门程序化交易的基础策略.原理简单,是新手尝试程序化的好选择,在其黄金时期,比特币搬砖也带 ...

  9. 矩阵快速幂/矩阵加速线性数列 By cellur925

    讲快速幂的时候就提到矩阵快速幂了啊,知道是个好东西,但是因为当时太蒟(现在依然)没听懂.现在把它补上. 一.矩阵快速幂 首先我们来说说矩阵.在计算机中,矩阵通常都是用二维数组来存的.矩阵加减法比较简单 ...

  10. WPF-按钮美化

    我们不多哔哔,先放图: 美化按钮背景: 当我们用系统默认的按钮风格似乎太老套,而且不太美观,某些情况下我们需要对按钮进行美化和重绘,只有这样才能满足我们的需要 按钮美化思维引导: 图中1 为控件Bor ...