html5笔迹画图,html5绘图工具canvas模拟笔迹绘画特效

特效描述：html5绘图工具 canvas 模拟笔迹绘画特效。html5绘图工具使用鼠标在网页上进行写字，canvas绘画模拟笔迹特效

代码结构

1. HTML代码

sorry!

//定义获取id 元素的函数

function $(id){

return document.getElementById(id);

}

//定义了两个数组元素。用于记录鼠标的X Y 轴的位置

var clickX = new Array();

var clickY = new Array();

var act = new Array();

var canvas = $("canvas");//画布对象

var c = canvas.getContext("2d");

var print = false;

//鼠标按下触发

canvas.onmousedown = function(e){

//记录当前鼠标点

var m = window.event || e;

print = true;

addClick(m.clientX-this.offsetLeft,m.clientY-this.offsetTop,0);

}

//鼠标移动触发

canvas.onmousemove = function(e){

var m = window.event || e;

if(print){//鼠标按下来移动的话

addClick(m.clientX-this.offsetLeft,m.clientY-this.offsetTop,1);//true为新的点绘画

draw();

}

//鼠标松开触发

canvas.onmouseup = function(){

print = false;

}

//鼠标离开触发

canvas.onmouseleave = function(){

print = false;

}

*鼠标点记录

* x 鼠标X 轴

* y 鼠标Y 轴

function addClick(x,y,a){

clickX.push(x);

clickY.push(y);

act.push(a);

}

*开始绘画

function draw(){

c.strokeStyle = "pink";//设置填充路径的颜色

//当两条线条交汇时，创建圆形边角：

c.lineJoin = "round";

c.lineWidth = 5;

for(var i = 0,l = clickX.length;i

c.beginPath();//开始路径绘制

if(act[i]){

c.moveTo(clickX[i-1],clickY[i-1]);

}else{

c.moveTo(clickX[i]-1,clickY[i]-1);//新的点。为了不要和lineTo相等，所以减了一个像素。

}

c.lineTo(clickX[i],clickY[i]);

c.closePath();//结束路径绘制

c.stroke();//对路径进行填充

}

html5笔迹画图,html5绘图工具canvas模拟笔迹绘画特效相关推荐

html5动态画图,HTML5使用Canvas动态绘制心型线和玫瑰线的教程
1HTML5的Canvas元素提供了丰富的绘图功能,能够使我们制作出许多精美的动画.本次将运用canvas绘制心型线和玫瑰线. 1.心型线和玫瑰线绘制这两种曲线,首先我们分别选用两个参数方程(心型线 ...
html5画图作品,10款最佳HTML5绘图工具
HTML5无疑是当前最受宠的一项技术,每个web设计者都在热烈的讨论这种神奇的标记语言的兴起.HTML5是一种学起来毫不费力的标记语言,但它却能提供迷人的.富有艺术性的特征,帮助web设计人员完成他们 ...
前端绘图开源组件_10款最佳HTML5绘图工具
HTML5无疑是当前最受宠的一项技术,每个web设计者都在热烈的讨论这种神奇的标记语言的兴起.HTML5是一种学起来毫不费力的标记语言,但它却能提供迷人的.富有艺术性的特征,帮助web设计人员完成他们 ...
HTML5 canvas 在线画笔绘图工具（三）
组装画板(TDrawBuilder) 在这一小节中我们要把工具条和画板组装起来,让他们可以协同进行工作. 画板通过一个命名为TDrawBuilder来进行组装.在详细讲解TDrawBuilder对象之 ...
html5画图作品,8款最佳HTML5绘图工具
HTML5无疑是当前最受宠的一项技术,今天推荐8款HTML5绘图工具,同样惊艳你的眼球!这些绘图工具大多数是用HTML5画布(Canvas)实现的,部分辅以Javascript.对每一个web设计者来 ...
HTML5 canvas 在线画笔绘图工具（一）
HTML5 canvas 在线画笔绘图工具(一) 功能介绍这是我用Javascript写的第一个程序,在写的过程中走了很多弯路,所以写完之后想分享出来,给与我一样的初学者做为学习的参考,同时在 ...
php绘图和canvas,html5 canvas画图实例用法汇总
HTML5 canvas画图HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript).不过, 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务.get ...
素描小子跑酷html5游戏在线玩,推荐14款强大的HTML5素描及绘图工具
1. Mr. Doobs Harmony 如果你喜欢涂鸦,可以试试这款工具,它有各种各样的画笔可用于绘图. 2. Sketch 一款叫Hakim El Hattab的人开发的一款素描工具,可绘制三维图 ...
html酷炫电子时钟效果,逼真的HTML5 canvas模拟时钟特效
插件描述:thooClock是一款效果非常逼真的HTML5 canvas模拟时钟特效.该时钟特效使用jQuery和HTML5 Canvas API来制作,模拟现实生活中的时钟.并且它还具有定时闹钟的功 ...

html5笔迹画图,html5绘图工具canvas模拟笔迹绘画特效

html5笔迹画图,html5绘图工具canvas模拟笔迹绘画特效相关推荐

最新文章

热门文章