canvas h5制作写字板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<title>写字板</title>
<style type="text/css">
body,html {
padding: 0;
margin: 0;
}
a,div,span {
font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
}
.canvas-box {
display: block;
margin: 40px auto;
background: #f5f5f5;
}
.color-box {
width: 1080px;
display: block;
margin: 20px auto;
text-align: center;
}
.color-item {
display: inline-block;
vertical-align: middle;
width: 48px;
height: 24px;
margin: 10px;
background: #989898;
cursor: pointer;
}
.red {
background: #e01d5b;
}
.blue {
background: #1d6ae0;
}
.green {
background: #1de087;
}
.yellow {
background: #f3e41d;
}
.orange {
background: #f9850b;
}
.black {
background: #333;
}
.color-item.active {
border: solid 3px #565656;
}
.btn {
display: block;
width: 120px;
height: 40px;
line-height: 40px;
margin: 10px auto;
text-align: center;
font-size: 18px;
border: solid 1px #999;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<canvas class="canvas-box" id="canvas"></canvas>
<div class="color-box">
<span class="color-item red"></span>
<span class="color-item blue"></span>
<span class="color-item green"></span>
<span class="color-item yellow"></span>
<span class="color-item orange"></span>
<span class="color-item black active"></span>
</div>
<div class="btn" onclick="clearDraw()">清除</div>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
var isDraw = false; //定义变量控制画笔是否可用
var movePos; //定义变量存放初始画笔开始位置
var linWidth = 10;
var linColor = '#333';
window.onload = function(){
draw();
}
function draw(){
canvas.width = 500;
canvas.height = 500;
context.strokeStyle = "red";
context.lineWidth = 10;
context.beginPath();
context.strokeRect(0,0,500,500);
//设置画笔颜色，宽度
context.strokeStyle = "red";
context.lineWidth = 1;
//使线段连续，圆滑
context.lineCap = "round";
context.lineJoin = "round";
drawDashedLine(context,0,0,500,500);
drawDashedLine(context,0,500,500,0);
drawLine(context,0,250,500,250);
drawLine(context,250,0,250,500);
}
//画虚线（参照网上大神）
function drawDashedLine(context, x1, y1, x2, y2, dashLength) {
dashLength = dashLength === undefined ? 5 : dashLength;
var deltaX = x2 - x1;
var deltaY = y2 - y1;
var numDashes = Math.floor(
Math.sqrt(deltaX * deltaX + deltaY * deltaY) / dashLength);
for (var i=0; i < numDashes; ++i) {
context[ i % 2 === 0 ? 'moveTo' : 'lineTo' ] (x1 + (deltaX / numDashes) * i, y1 + (deltaY / numDashes) * i);
}
context.stroke();
};
//画直线
function drawLine(context,x1,y1,x2,y2){
context.moveTo(x1,y1);
context.lineTo(x2,y2);
context.stroke();
};
//获取鼠标相对与canvas位置
function getPos(x,y){
var box = canvas.getBoundingClientRect();
return {x: x-box.left,y: y-box.top};
};
//画笔
function drawing(e){
if(isDraw){
var position = getPos(e.clientX,e.clientY);
context.strokeStyle = linColor;
context.lineWidth = linWidth;
context.save();
context.beginPath();
context.moveTo(movePos.x,movePos.y);
context.lineTo(position.x,position.y);
context.stroke();
movePos = position;
context.restore();
}
}
//鼠标点下
canvas.onmousedown = function(e){
isDraw = true;
movePos = getPos(e.clientX,e.clientY);
drawing(e);
}
//鼠标移动
canvas.onmousemove = function(e){
drawing(e);
}
//鼠标松开
canvas.onmouseup = function(e){
isDraw = false;
}
//鼠标离开
canvas.onmouseout =function(e){
isDraw = false;
}
//选择画笔颜色
$('.color-item').on('click',function(){
$(this).addClass('active').siblings().removeClass('active');
linColor = $(this).css('background-color');
});
//清除
function clearDraw(){
context.clearRect(0,0,500,500);
draw();
}
</script>
</body>
</html>
canvas h5制作写字板的更多相关文章
- html5之canvas画图 1.写字板功能
写字板事例: 写字板分析:1.点击鼠标開始写字(onmosedown)2.按下鼠标写字(onmousemove)3.松开鼠标,停下写字(撤销onmousemove事件): 代 ...
- canvas画布，写字板
<!doctype html><html><head> <meta charset="utf-8"> <meta http-e ...
- 一起来学习Android自定义控件2-简单的写字板控件
概述 上一篇文章我们对自定义控件进行了一个大体的知识介绍.今天就来学习自定义一个简单的写字板控件. 先来看看效果图 就是简单的根据手指写下的轨迹去画出内容 实现 在上一篇文章里提到了android官方 ...
- Android自己定义控件2-简单的写字板控件
概述 上一篇文章我们对自己定义控件进行了一个大体的知识介绍. 今天就来学习自己定义一个简单的写字板控件. 先来看看效果图 就是简单的依据手指写下的轨迹去画出内容 实现 在上一篇文章里提到了androi ...
- WPF学习之路（五） 实例：写字板
写字板实例一 MainWindow.xaml <Window x:Class="Wordpad01.MainWindow" xmlns="http://schema ...
- CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具，可以直接生成SVG代码以及配合Mask制作蒙板。
CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板. CLIP PATH (MASK) GENERATO ...
- 其实H5制作就这样~
今天的H5技术越来越成熟了,H5制作变得越来越简单化,尤其是H5制作工具(http://wcd.im/?_ta=2787)领域,基本上已经形成一条比较完整的产业链,所以对当下的企业来说,如果仍未体验过 ...
- 电商H5制作常使用的排版方式
在很多电商网站或者APP中,经常会出现一些精美夺目的活动宣传海报,吸引着用户点击.购买.如今,电商们可以把海报搬到微信中,做出面向用户群大.传播快的H5制作.那么,制作电商H5制作时可以使用哪三种排版 ...
- 移动端H5制作安卓和IOS的坑 持续更新...
移动端H5制作安卓和IOS的坑 持续更新... 前言:最近参加公司的H5页面创意竞赛,又遇到不少页面在不同系统上的坑.踩坑之余,觉得很多之前遇到的知识点都忘了,索性开一篇博文,把这些坑都统一归纳起来, ...
随机推荐
- 【final】评价①
飞天小女警添加猜你喜欢功能,个人很喜欢.当推荐产品不喜欢的时候还有其他的选择,很人性化. 金州勇士将管理人员的角色分开,使整个系统的分工更明确,也更清晰. 新蜂的俄罗斯方块随着等级的提升有直观的颜色变 ...
- PDO笔记
<?php/* * 查询操作主要是PDO::query().PDO::exec().PDO::prepare().PDO::query()主要是用于有记录结果返回的操作,特别是SELECT操作, ...
- Java对象空间分配流程
对象空间分配流程如下: 针对这个流程,分别解释一下每一个选项的使用场景. 栈上分配: 栈上分配的基础在于逃逸分析,逃逸分析可以得到三种对象的逃逸状态. 全局逃逸:一个对象的引用逃出了方法或者线程. ...
- LoadRunner脚本增强技巧之自动关联
为什么要做关联,原理很简单,录制脚本的时候,服务器会给用户一个唯一的认证码来进行操作,当再次回放脚本的时候服务器又会给一个全新的认证码,而录制好的脚本是写死的,还是拿老的认证码提交,肯定会导致脚本执行 ...
- 【前端学习笔记02】JavaScript字符串、数组的一些操作方法
字符串操作: //str.length "micromajor".length // 10 //str.charAt() "micromajor".charAt ...
- 【EF】EF Code-First数据迁移
Code-First数据迁移 首先要通过NuGet将EF升级至最新版本. 新建MVC 4项目MvcMigrationDemo 添加数据模型 Person 和 Department,定义如下: usi ...
- Kafka及Spring Cloud Stream
安装 下载kafka http://mirrors.hust.edu.cn/apache/kafka/2.0.0/kafka_2.11-2.0.0.tgz kafka最为重要三个配置依次为:broke ...
- ZOJ3513_Human or Pig
这个题太坑爹了,题意也好纠结. 是这样的,给你一个n*m的矩形,中间有n*m个1*1的格子,有不同的跳跃方法.如果当前为human(人类)那么他可以有意识的选择自己下一步跳往何方:如果当前为pig(猪 ...
- iOS----MRC（手动内存管理）
1.MRC是什么,有什么用? 在苹果开发中,我们是没有垃圾回收机制的.所以在ARC推出之前,我们苹果开发程序员需要通过手动代码的形式尽量严密的管理我们的App的内存: ---------------- ...
- 题解 P2089 【烤鸡】
看到这个题一共也就pow(3,10)=59049次循环,那不就暴力了嘛! 虽然说正解是动归和搜索, 但是搜索和暴力枚举的差距真心不大(不好好学习qwq). 看到楼上又说到 答案需要数据存储的问题, 这 ...