- 浏览: 95304 次
- 性别:
- 来自: 苏州
文章分类
最新评论
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas塗鴉板</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.js">
</script>
<style>
body,input { font-size: 9pt; }
#dCanvas,#dLine { clear: both; }
.option
{
float: left; width: 20px; height: 20px; border: 2px solid #cccccc;
margin-right: 4px; margin-bottom: 4px;
}
.active { border: 2px solid black; }
.lw { text-align: center; vertical-align: middle; }
img.output { border: 1px solid green; }
#cSketchPad { cursor: arrow; }
</style>
<script>
$(function () {
//產生不同顏色的div方格當作調色盤選項
var colors =
"red;orange;yellow;green;blue;indigo;purple;black;white".split(';');
var sb = [];
$.each(colors, function (i, v) {
sb.push("<div class='option' style='background-color:" + v + "'></div>");
});
$("#dPallete").html(sb.join("\n"));
//產生不同尺寸的方格當作線條粗細選項
sb = [];
for (var i = 1; i <= 9; i++)
sb.push("<div class='option lw'>" +
"<div style='margin-top:#px;margin-left:#px;width:%px;height:%px'></div></div>"
.replace(/%/g, i).replace(/#/g, 10 - i / 2));
$("#dLine").html(sb.join('\n'));
var $clrs = $("#dPallete .option");
var $lws = $("#dLine .option");
//點選調色盤時切換焦點並取得顏色存入p_color,
//同時變更線條粗細選項的方格的顏色
$clrs.click(function () {
$clrs.removeClass("active");
$(this).addClass("active");
p_color = this.style.backgroundColor;
$lws.children("div").css("background-color", p_color);
}).first().click();
//點選線條粗細選項時切換焦點並取得寬度存入p_width
$lws.click(function () {
$lws.removeClass("active");
$(this).addClass("active");
p_width =
$(this).children("div").css("width").replace("px", "");
}).eq(3).click();
//取得canvas context
var $canvas = $("#cSketchPad");
var ctx = $canvas[0].getContext("2d");
ctx.lineCap = "round";
ctx.fillStyle = "white"; //整個canvas塗上白色背景避免PNG的透明底色效果
ctx.fillRect(0, 0, $canvas.width(), $canvas.height());
var drawMode = false;
//canvas點選、移動、放開按鍵事件時進行繪圖動作
$canvas.mousedown(function (e) {
ctx.beginPath();
ctx.strokeStyle = p_color;
ctx.lineWidth = p_width;
ctx.moveTo(e.pageX - $canvas.position().left, e.pageY - $canvas.position().top);
drawMode = true;
})
.mousemove(function (e) {
if (drawMode) {
ctx.lineTo(e.pageX - $canvas.position().left, e.pageY - $canvas.position().top);
ctx.stroke();
}
})
.mouseup(function (e) {
drawMode = false;
});
//利用.toDataqURL()將繪圖結果轉成圖檔
$("#bGenImage").click(function () {
$("#dOutput").html(
$("<img />", { src: $canvas[0].toDataURL(),
"class": "output"
}));
});
});
</script>
</head>
<body>
<div id="dPallete"></div>
<div id="dLine"></div>
<div id="dCanvas">
<canvas id="cSketchPad" width="300" height="300" style="border: 2px solid gray" />
</div>
<input type="button" id="bGenImage" value="Generate Image" />
<div id="dOutput"></div>
</body>
</html>
发表评论
-
css set a4 paper size
2017-02-23 17:38 623HTML <div class="book ... -
CSS Paged Media - @page Rule
2017-02-23 17:34 758Paged media differ from contin ... -
简单的html5 File测试 for pic2base64
2014-07-10 17:56 857<!DOCTYPE html PUBLIC " ... -
JS判断浏览器是否支持flash的方法
2014-06-23 11:25 970var isIE = !-[1,]; if(isIE){ ... -
js跨域 -- 使用form表单 + 隐藏的iframe
2014-06-18 18:13 3368将form表单提交到目标服务器(action=“url”),当 ... -
仿QQ灵活拖拉文件上传
2014-02-08 14:03 1156在html5中,出现了众多的新的技术和特性,而本文将介绍的是 ... -
jQuery 判断iPad、iPhone、Android是横屏还是竖屏(window.orientation实现)
2014-02-08 11:26 2313在ipad、iphone网页开发中,我们很可能需要判断是横屏 ... -
CSS3 为不同媒介设置样式的方法(CSS3 Media Queries)
2014-02-08 11:21 963随着智能手机、平板电脑越来越流行,许多网站都开始考虑为这些移 ... -
如何判断微信内置浏览器
2013-12-11 15:13 1206在进行微信公众账号开发的时候,其中很大一块是微站点的开发,我 ... -
细数那些不能直视的IE6BUG
2013-06-14 08:42 6621. li在IE中底部3像素的BUG 解决方案:在< ... -
兼容firefox,chrome的网页灰度效果
2013-04-20 20:32 897要实现网页灰度,最稳妥的办法莫过于直接处理所有图像,不用考虑兼 ... -
HTML5实践-图片设置成灰度图
2013-04-20 20:26 1246以前,在web上要显示灰度图片的话,只有手工使用图片软件转换 ... -
HTML5 组件Canvas实现图像灰度化
2013-04-20 20:22 1369HTML5发布已经有很长一段时间了,一直以来从来没有仔细 ... -
Javascript Math ceil()、floor()、round()三个函数的区别
2012-12-18 08:54 788ceil():将小数部分一律向整数部分进位。 如: ... -
css+table 1px边框单元格
2012-10-11 11:59 1086<!DOCTYPE html PUBLIC &qu ... -
21 款超棒的 CSS3 效果
2013-12-03 10:47 882CSS3能够帮助你开发出超棒的动画和特效,你是不是想了解究竟 ...
相关推荐
5. **js文件**:压缩包中的"js"文件很可能是实现涂鸦功能的JavaScript代码。它可能包含了上述所有逻辑,如事件监听、画布操作等。通过分析这个文件,我们可以深入理解整个涂鸦功能的工作原理。 6. **实现细节**:...
《jQuery的在线涂鸦插件wPaint:实现网页标注与QQ截图功能的探索》 在当今互联网应用中,用户交互体验越来越受到重视,其中一种常见的交互形式就是在线涂鸦和标注功能,它使得用户能够在网页上进行即时的注释和编辑...
该项目是一个现代网页涂鸦工具的设计源码,主要使用JavaScript语言开发,同时包含...该工具依赖于HTML5 Canvas、jQuery和FontAwesome库,支持Internet Explorer 9及以上版本、Firefox、Opera、Chrome和Safari浏览器。
2. **Canvas API**:屏幕涂鸦动画很可能是通过HTML5的Canvas元素实现的。Canvas提供了一个二维绘图环境,可以用于绘制图形、动画,以及实现用户交互,如画笔、橡皮擦等涂鸦功能。 3. **动画原理**:在Canvas中,...
总的来说,"html5涂鸦板"是一个利用HTML5 `<canvas>`元素、jQuery和JavaScript技术实现的互动涂鸦应用。它展示了HTML5在网页动态图形和用户交互方面的强大能力,同时也体现了JavaScript作为客户端编程语言在实现复杂...
51、Jquery-html5类似百度贴吧涂鸦绘图效果
其中,“html5 涂鸦”是指利用HTML5的Canvas元素构建的一种在线绘图功能,让用户可以在网页上进行自由绘画,类似于实际的涂鸦板。在本案例中,我们关注的是一个基于jQuery的在线涂鸦插件——wPaint。 wPaint是一个...
HTML5涂鸦画板是一种基于Web技术实现的交互式绘图工具,允许用户在网页上进行创作,类似于桌面应用程序中的画图软件。这个项目利用了HTML5、CSS3和jQuery的强大功能,为用户提供丰富的绘图体验。以下是这个涂鸦画板...
总的来说,"简单的jQuery网页画板涂鸦代码"是一个结合了HTML、CSS和JavaScript技术的实例,展示了如何利用jQuery简化用户交互,并结合Canvas API实现实时的网页绘图功能。这样的项目对于学习前端开发,特别是了解...
jquery HTML5涂鸦(疯狂的触手),鼠标在网页上移动,就可实现涂鸦功能,在网页画出像触手一样的图画,点击鼠标可以清除画布。绚丽的色彩带来震撼的效果,右上角那些滑块,可改变一些颜色值、细条粗细等,对HTML5感...
《Asp.Net+Flash+jQuery实现的在线涂鸦插件详解》 在互联网技术日新月异的今天,用户交互体验成为了网站设计的关键因素之一。本文将深入探讨一个基于Asp.Net、Flash和jQuery技术实现的在线涂鸦插件,通过分析其中的...
在"html5画布 涂鸦 上传"这个主题中,我们关注的是用户在Canvas上涂鸦并将其保存或上传到服务器的过程。这一过程通常涉及以下几个步骤: 1. **创建Canvas元素**:首先在HTML中创建一个`<canvas>`标签,并通过...
HTML5是现代网页开发的重要标准,其中Canvas元素为实现涂鸦板提供了可能。Canvas是一个基于矢量图形的画布,可以使用JavaScript进行动态渲染,提供丰富的绘图API,使得开发者能够创建出复杂的动态图形和交互式应用。...
本项目名为"jQuery+CSS3实现在线编辑涂鸦画板功能",它结合了HTML5的强大特性,提供了用户可以自由涂鸦、调节颜色以及应用高斯模糊效果的功能。这个功能的实现对于在线教育、设计协作或者娱乐类网站来说都是一个极其...
其次,Canvas是HTML5引入的一个重要特性,它提供了一个二维绘图表面,允许开发者直接在网页上绘制图形。在这个工具中,Canvas被用来实现涂鸦功能,用户可以在画布上自由绘制线条、形状,就像在纸上画画一样。Canvas...
在本项目"html5类似百度贴吧涂鸦绘图效果.zip"中,主要涉及了前端开发技术,特别是HTML5、CSS、JavaScript以及jQuery的应用。这些技术是构建交互式和动态网页的关键组成部分,尤其在创建类似百度贴吧涂鸦绘图功能时...
这个"HTML5 canvas写字板涂鸦画板.zip"文件包含了一个基于jQuery库的实现,使得用户可以在网页上自由地进行绘画操作,类似于一个在线的写字板或涂鸦工具。以下是对这个项目的关键知识点的详细解释: 1. **HTML5 ...
在这个“html5 canvas实现涂鸦写字板效果.zip”压缩包中,包含了一个基本的涂鸦写字板的实现,主要依赖于HTML5的Canvas元素以及jQuery库。这个特效代码可以用于各种场合,比如在线教育平台让学生画图解释概念,或者...
这个压缩包“HTML5 Canvas支持手机端涂鸦画板下载.zip”显然是一个包含资源,帮助开发者创建一个手机端的涂鸦画板应用。这个应用可能允许用户用手指在屏幕上自由绘画,并能保存他们的作品。 首先,我们来深入了解...