先看图片

  

HTML

  

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../src/lib/require.js"></script>
<style>
input{
width: 50px;
border: none;
text-align: center;
}
input[type=range]{
width: 200px;
}
label{
margin-left: 10px;
}
input,label{
vertical-align: middle;
}
canvas{
cursor: default;
}
</style>
</head>
<body>
<div class="m10">
<canvas id="canvas"></canvas>
<p><input type="range" name="" id="num" min=0 max=10 value=2><label for="num">线条大小</label><input type="color" name="" id="color"><label for="color">线条颜色</label></p>
</div> <script>
requirejs(['../src/canvas'], function() {});
</script>
</body>
</html>

  Javascript

  

define([], function() {
var getId = function(id) {
return typeof id === 'string' ? document.getElementById(id) : id;
}; function getPosition(o) {
if (!(o && o.nodeName)) {
return {
left: 0,
top: 0
};
}
var t = parseInt(o.offsetTop, 10),
l = parseInt(o.offsetLeft, 10);
while (o.offsetParent) {
o = o.offsetParent;
t += o.offsetTop;
l += o.offsetLeft;
}
return {
left: l,
top: t
};
}
var canvas = getId('canvas'),
ct = canvas.getContext('2d'),
w = canvas.width = 600,
h = canvas.height = 400;
var bgl = ct.createRadialGradient(400, 0, 0, 400, 0, 400);
bgl.addColorStop(0, 'red');
bgl.addColorStop(1, 'green');
ct.beginPath(); function draw(ev) {
console.log(getPosition(canvas));
var x = ev.clientX - getPosition(canvas).left;
var y = ev.clientY - getPosition(canvas).top;
ct.lineTo(x, y);
ct.stroke();
console.log(x + '--' + y);
}
canvas.onmousedown = function(ev) {
var x = ev.clientX - getPosition(canvas).left;
var y = ev.clientY - getPosition(canvas).top;
var size = getId('num').value;
var color = getId('color').value;
ct.save();
ct.strokeStyle = color;
ct.lineWidth = size;
ct.beginPath();
canvas.onmousemove = draw;
};
document.onmouseup = function(ev) {
canvas.onmousemove = null;
ct.closePath();
//ct.fill();
ct.restore();
};
});

  

Canvas现实画板功能的更多相关文章

  1. canvas实现画板功能(渐变、动画、阴影...)

    刚刚在博客园落户了,希望能在这认识更多大神,希望能和大家交好朋友. 闲来无事,把以前用canvas写的画板代码改进了一番,用Html5提供的表单标签给其 加了一个选择颜色的功能,因此发现了该标签的一个 ...

  2. 【分享】用Canvas实现画板功能

    前言 PC端测试:QQ浏览器全屏绘画完成.缩小时内容会被清空,切换背景颜色内容会被重置,其他暂无发现: 手机端测试:微信内置浏览器不通过:Safari 浏览器使用画笔时没固定页面会有抖动效果,使用橡皮 ...

  3. canvas实现画板

    canvas实现画板 主要用到知识点: 鼠标事件onmousedown() onmousemove() onmouseup() onmouseleave() 事件委托 canvas的一些方法 如:绘制 ...

  4. 一款基于HTML5 Canvas的画板涂鸦动画

    今天给各网友分享一款基于HTML5 Canvas的画板涂鸦动画.记得之前我们分享过一款HTML5 Canvas画板工具,可以切换不同的笔刷,功能十分强大.本文今天要再来分享一款基于HTML5 Canv ...

  5. canvas小画板--(1)平滑曲线

    功能需求 项目需求:需要实现一个可以自由书写的小画板 简单实现 对于熟悉canvas的同学来说,这个需求很简单,短短几十行代码就能实现: <!doctype html> <html& ...

  6. canvas小画板——(2)荧光笔效果

    我们在上一篇文章中讲了如何绘制平滑曲线 canvas小画板——(1)平滑曲线. 透明度实现荧光笔 现在我们需要加另外一种画笔效果,带透明度的荧光笔.那可能会觉得绘制画笔的时候加上透明度就可以了.我们来 ...

  7. html5 canvas 实现倒计时 功能

    function showTime(a) { var b = { id: "showtime", //canvasid x: 60, //中心点坐标 X轴; y: 60, //中心 ...

  8. iOS实现白板、画板功能,有趣的涂鸦工具,已封装,简单快捷使用

    一.效果图: 二.选择颜色: 分[固定颜色模式]和[自由取模式].  三.操作栏功能: 1.撤销:撤销上一步操作,可一直往上进行,直到全部清空. 2.清空:直接清除所有绘画. 3.橡皮擦:去除不要的绘 ...

  9. canvas 实现简单的画板功能添加手机端效果 1.01

    在上次的基础上,加了一些代码,手机端可操作 访问网址:https://chandler712.github.io/Item/ <!-- 简单版画板 --> <!DOCTYPE htm ...

随机推荐

  1. [ACM_数学] LA 3708 Graveyard [墓地雕塑 圈上新加点 找规律]

    Description   Programming contests became so popular in the year 2397 that the governor of New Earck ...

  2. Linux服务器Cache占用过多内存导致系统内存不足问题的排查解决(续)

    作者: 大圆那些事 | 文章可以转载,请以超链接形式标明文章原始出处和作者信息 网址: http://www.cnblogs.com/panfeng412/archive/2013/12/17/dro ...

  3. java5 ReadWriteLock用法--读写锁实现

    读写锁:分为读锁和写锁,多个读锁不互斥,读锁与写锁互斥,这是由jvm自己控制的,你只要上好相应的锁即可.如果你的代码只读数据,可以很多人同时读,但不能同时写,那就上读锁:如果你的代码修改数据,只能有一 ...

  4. C#——Dictionary<TKey, TValue> 计算向量的余弦值

    说明:三角函数的余弦值Cos我想,每个学计算机的理工人都知道,但是真的明白它的用途,我也是刚明白.每个人在初中或者高中的时候,都有这么个疑惑,学三角函数干什么用的?很直白的答案就是考试用的.而且当时的 ...

  5. centos 关闭防火墙

    在centos上搭建了个服务器,本机可以访问,局域网无法访问 解决方案:关闭防火墙 sudo systemctl stop firewalld.service 令人恼火的是stop iptables之 ...

  6. Nodejs学习笔记(十三)— PM2

    目录 简介 pm2安装 操作 启动 关闭 其它方式启动/关闭 从PM2中删除 重载和重启 查看详细信息 多项目操作 集群 其它操作 写在之后... 简介 PM2 pm2是一个内置负载均衡的node.j ...

  7. (二)关于ajax那些事

    哈哈,今天突然兴起,想了想自己对ajax的了解,来这里叙述下.心情好,嘿嘿嘿 ajax是一种创建交互式网页应用的网页开发技术.就是在不重新加载页面的情况下,更新部分网页. ajax原理:ajax就是相 ...

  8. 数据采集:完美下载淘宝Ip数据库 简单的程序节省60元人民币而不必购买数据库

    曾经做网站类型的程序时,经常需要收集客户端的访问数据,然后加以分析.这需要一个Ip数据库,数据表中显示Ip所在的省份市区等信息.网络上有流传的Ip纯真数据库,一些公开的Web服务也可以查询Ip地址信息 ...

  9. AndroidStudio的一些坑

    以下环境为Android Studio 1.3.2,Gradle 2.7(as自带2.4,另下载的2.7) 编译时提示Multiple dex files define: Lcom/sina/weib ...

  10. android: 文件存储

    数据持久化就是指将那些内存中的瞬时数据保存到存储设备中,保证即使在手机或电脑 关机的情况下,这些数据仍然不会丢失.保存在内存中的数据是处于瞬时状态的,而保存在 存储设备中的数据是处于持久状态的,持久化 ...