[JavaScript]html5、canvas、js写字板

来源:本网整理

canvas能做什么? canvas是HTML5中的新元素,你可以使用javascript用它来绘制图形、图标、以及其它任何视觉性图像。它也可用于创建图片特效和动画。如果你掌握了完整的命令,你可以用canvas创建丰富的web应用程序。如果你想很好的使用canvas,你

笔顺临摹,拼音临摹,都可以。小学生可以开课了 scrolltotop.offset(100,120); scrolltotop.init();

[1].[代码] [JavaScript]代码 跳至 [1] [2] [3] [4] [5]

/* * writeboard * @Author toubidu 1530341234@qq.com * @param {arg} obj 顶层对象, * @param {arg} x 横坐标数组 * @param {arg} y 纵坐标数组 * @param {arg} n 笔画状态 * @param {arg} t 时间间隔 * @param {arg} callback 回调,返回x,y,n,t,图片路径 * @param {arg} type 题型 * @param {arg} content 容器内容,临摹文字,拼音等 */ function writeboard(obj,x,y,n,t,callback,type,content){//init fun 参数:顶级对象 x坐标 y坐标 笔画标识 时间差 回调定义 临摹文字 //init data var backcanvas = obj.find(".backcanvas")[0]; //获取canvas var backcontext = backcanvas.getContext('2d'); //canvas追加2d画图 var canvas = obj.find(".canvas")[0]; //获取canvas var context = canvas.getContext('2d'); //canvas追加2d画图 var realcanvas = obj.find(".realcanvas")[0]; //获取canvas var realcontext = realcanvas.getContext('2d'); //canvas追加2d画图 var canvasimg=new Image(); switch (type) { case 1: backcanvas.height="300"; canvas.height="300"; realcanvas.height="300"; obj.css('height',300); obj.find(".writeboard-box").css('height',300); obj.find(".writeboar-btn").css('height',300); canvasimg.src="tzg.gif"; canvasimg.onload=function(){ backcontext.drawImage(canvasimg,0,0,300,300); backcontext.fillStyle="#eeeeee"; backcontext.textAlign = 'center'; backcontext.font = "240px 宋体"; backcontext.fillText(content.font,150,240); backcontext.strokeStyle="#add59e"; backcontext.strokeText(content.font,150,240); }; break; case 2: backcanvas.height="300"; canvas.height="300"; realcanvas.height="300"; obj.css('height',300); obj.find(".writeboard-box").css('height',300); obj.find(".writeboar-btn").css('height',300); canvasimg.src="tzg.gif"; backcontext.drawImage(canvasimg,0,0,300,300); canvasimg.src="tzg.gif"; canvasimg.onload=function(){ backcontext.drawImage(canvasimg,0,0,300,300); }; break; case 3: backcanvas.height="405"; canvas.height="405"; realcanvas.height="405"; obj.css('height',405); obj.find(".writeboard-box").css('height',405); obj.find(".writeboar-btn").css('height',405); canvasimg.src="tzg2.gif"; canvasimg.onload=function(){ backcontext.drawImage(canvasimg,0,0,300,405); backcontext.fillStyle="#999999"; backcontext.font = "60px Arial"; backcontext.textAlign = 'center'; backcontext.fillText(content.word,150,75); }; break; case 4: backcanvas.height="405"; canvas.height="405"; realcanvas.height="405"; obj.css('height',405); obj.find(".writeboard-box").css('height',405); obj.find(".writeboar-btn").css('height',405); canvasimg.src="tzg2.gif"; canvasimg.onload=function(){ backcontext.drawImage(canvasimg,0,0,300,405); backcontext.fillStyle="#999999"; backcontext.font = "240px 宋体"; backcontext.textAlign = 'center'; backcontext.fillText(content.font,150,345); }; break; case 5: backcanvas.height="405"; canvas.height="405"; realcanvas.height="405"; obj.css('height',405); obj.find(".writeboard-box").css('height',405); obj.find(".writeboar-btn").css('height',405); canvasimg.src="tzg2.gif"; canvasimg.onload=function(){ backcontext.drawImage(canvasimg,0,0,300,405); backcontext.fillStyle="#999999"; backcontext.font = "240px 宋体"; backcontext.textAlign = 'center'; backcontext.fillText(content.font,150,345); backcontext.font = "60px Arial"; backcontext.fillText(content.word,150,75); }; break; }; context.lineCap="round"; //end var lastX = -1; //路径坐标,从起始到下一个的坐标 var lastY = -1; //路径坐标 var flag = 0; //标志,判断是按下后移动还是未按下移动 重要 var penwidth=10; //画笔宽度 var pencolor="#000";//画笔颜色 var timecha=80;//笔画间隔时间差 var imageurl;//存放canvas 图片base64 路径 var linex = new Array(); //横坐标 var liney = new Array(); //纵坐标 var linen = new Array(); //移动坐标 var linetime = new Array(); //记录时间 if(x&&y&&n&&t){ //数据外加载 linex = x; //横坐标 liney = y; //纵坐标 linen = n; //移动坐标 linetime = t; //记录时间 strokel(); }else{ linex = []; //横坐标 liney = []; //纵坐标 linen = []; //移动坐标 linetime = []; //记录时间 }; //handle canvas.addEventListener('mousemove', onMouseMove, false); //鼠标移动事件 canvas.addEventListener('mousedown', onMouseDown, false); //鼠标按下事件 canvas.addEventListener('mouseup', onMouseUp, false); //鼠标抬起事件 document.documentElement.addEventListener('mouseup', ondocMouseMove, false);//防止冒泡 function ondocMouseMove(evt) { if(evt.target.tagName=="CANVAS"){ }else{ if(flag == 1) { flag = 0; linex.push(evt.layerX); liney.push(evt.layerY); linen.push(0); linetime.push(new Date().getTime()); }else{ }; }; }; function onMouseMove(evt) { if (flag == 1) { linex.push(evt.layerX); //坐标存入数组 liney.push(evt.layerY); linen.push(1); //移动1位 linetime.push(new Date().getTime());//步骤和记录的时间戳 //console.log(linen) strokel(); } }; function onMouseDown(evt) { flag = 1; //标志按下 linex.push(evt.layerX); //坐标存入数组 layer获取相对于当前元素的坐标,不同于pagex获取相对页面 liney.push(evt.layerY); linen.push(0); //按下0位 linetime.push(new Date().getTime()); } function onMouseUp(evt) { flag = 0; linex.push(evt.layerX); liney.push(evt.layerY); linen.push(0); linetime.push(new Date().getTime()); } function strokel(){ //路径绘制 context.clearRect(0,0,canvas.width,canvas.height); context.save(); //存储当前画布状态,破坏以前 context.translate(context.canvas.width/2, context.canvas.height/2); //原点从0,0移动到中心150,150 context.translate(-context.canvas.width/2, -context.canvas.height/2); //原点从150,150移动到0,0 context.beginPath(); //开始绘制路径 for (var i=0;i<linex.length;i++) { //移动鼠标,这个数组会不断push插入1,计算移动次数 lastX = linex[i]; //移动坐标 lastY = liney[i]; context.lineWidth = penwidth; //线宽度 context.strokeStyle = pencolor; if (linen[i] == 0) { //刚按下那个坐标位置,移动开始前 context.moveTo(lastX,lastY); //绘制路径的起始点坐标 //context.stroke(); //绘制 } else { //发生移动 context.lineTo(lastX,lastY); //绘制以后的左边点 //context.stroke(); //绘制 }; }; context.stroke(); //绘制 context.restore(); //释放画布以前状态 }; //回放 处理 var movPlayBtn = obj.find(".movPlayBtn"); movPlayBtn.click(movPlay); var settimea=[]; function movPlay () { //console.log(linen) for(var i=0;i<settimea.length;i++){ clearTimeout(settimea[i]); }; context.clearRect(0,0,canvas.width,canvas.height); context.save(); context.translate(context.canvas.width/2, context.canvas.height/2); context.translate(-context.canvas.width/2, -context.canvas.height/2); context.beginPath(); var datestart=0; var funa=[]; for (var i=0;i<linen.length;i++) { if(i==0){ context.lineWidth = penwidth; //线宽度 context.strokeStyle = pencolor; context.moveTo(linex[0],liney[0]); context.stroke(); //绘制 }else{ if(linen[i]==0 && linen[i-1]==0){ datestart=parseInt(datestart)+parseInt(linetime[i]-linetime[i-1])<timecha ? parseInt(datestart)+parseInt(linetime[i]-linetime[i-1]):parseInt(datestart)+parseInt(timecha); if (linen[i] == 0) { (funa[i]=function(datestart,xx,yy){ settimea[i]=setTimeout(function(){ context.clearRect(0,0,canvas.width,canvas.height); context.lineWidth = penwidth; //线宽度 context.strokeStyle = pencolor; context.moveTo(xx,yy); context.stroke(); //绘制 },datestart) })(datestart,linex[i],liney[i]); } else { (funa[i]=function(datestart,xx,yy){ settimea[i]=setTimeout(function(){ context.clearRect(0,0,canvas.width,canvas.height); context.lineWidth = penwidth; //线宽度 context.strokeStyle = pencolor; context.lineTo(xx,yy); context.stroke(); //绘制 },datestart) })(datestart,linex[i],liney[i]); }; }else{ datestart=parseInt(datestart)+parseInt(linetime[i]-linetime[i-1]); if (linen[i] == 0) { (funa[i]=function(datestart,xx,yy){ settimea[i]=setTimeout(function(){ context.clearRect(0,0,canvas.width,canvas.height); context.lineWidth = penwidth; //线宽度 context.strokeStyle = pencolor; context.moveTo(xx,yy); context.stroke(); //绘制 },datestart) })(datestart,linex[i],liney[i]); } else { (funa[i]=function(datestart,xx,yy){ settimea[i]=setTimeout(function(){ context.clearRect(0,0,canvas.width,canvas.height); context.lineWidth = penwidth; //线宽度 context.strokeStyle = pencolor; context.lineTo(xx,yy); context.stroke(); //绘制 },datestart) })(datestart,linex[i],liney[i]); }; }; context.stroke(); //绘制 } } context.restore(); //释放画布以前状态,不能写字就破坏了 }; //重置 处理 var resetCanvasBtn = obj.find(".resetCanvasBtn"); resetCanvasBtn.click(resetCanvas); function resetCanvas () { context.clearRect(0,0,canvas.width,canvas.height); linex = []; //横坐标 liney = []; //纵坐标 linen =[]; //移动坐标 linetime =[]; //时间戳 lastX = -1; //路径坐标,从起始到下一个的坐标 lastY = -1; //路径坐标 flag = 0; //标志,判断是按下后移动还是未按下移动 重要 }; //回退 处理 var goBackBtn = obj.find(".goBackBtn"); goBackBtn.click(goBack); function goBack () { var linenlastIndex=linen.join("").substr(0,linen.length-1).lastIndexOf("0"); if(linenlastIndex==0){ resetCanvas(); }else{ linex = linex.slice(0,linenlastIndex); //记录值-1 liney = liney.slice(0,linenlastIndex); //纵坐标 linen =linen.slice(0,linenlastIndex); //移动坐标 linetime=linetime.slice(0,linenlastIndex); //console.log(linen) strokel(); } }; //事件绑定 function bindButtonEvent(element, type, handler) { if(element.addEventListener) { element.addEventListener(type, handler, false); } else { element.attachEvent('on'+type, handler); } }; //确定事件 保存处理 function strokelreal(){ //路径绘制 realcontext.save(); //存储当前画布状态,破坏以前 realcontext.translate(context.canvas.width/2, context.canvas.height/2); //原点从0,0移动到中心150,150 realcontext.translate(-context.canvas.width/2, -context.canvas.height/2); //原点从150,150移动到0,0 realcontext.beginPath(); //开始绘制路径 for (var i=0;i<linex.length;i++) { //移动鼠标,这个数组会不断push插入1,计算移动次数 lastX = linex[i]; //移动坐标 lastY = liney[i]; realcontext.lineWidth = penwidth; //线宽度 realcontext.strokeStyle = pencolor; if (linen[i] == 0) { //刚按下那个坐标位置,移动开始前 realcontext.moveTo(lastX,lastY); //绘制路径的起始点坐标 //context.stroke(); //绘制 } else { //发生移动 realcontext.lineTo(lastX,lastY); //绘制以后的左边点 //context.stroke(); //绘制 }; }; realcontext.stroke(); //绘制 realcontext.restore(); //释放画布以前状态 }; var oksave = obj.find(".mar-2"); oksave.click(gosave); function gosave() { var backimgdata=backcontext.getImageData(0,0,canvas.width,canvas.height); realcontext.putImageData(backimgdata,0,0); strokelreal(); imageurl = realcanvas.toDataURL("image/png"); //获取canvas转为指定格式图片的路径 callback(linex,liney,linen,linetime,imageurl);//call }; };//end

[2].[图片] 1.png 跳至 [1] [2] [3] [4] [5]

[3].[图片] 2.png 跳至 [1] [2] [3] [4] [5]

[4].[图片] 3.png 跳至 [1] [2] [3] [4] [5]

[5].[文件] xieziban.rar ~ 42KB    (1) 跳至 [1] [2] [3] [4] [5]

文件不存在或者代码语言不存在 SyntaxHighlighter.autoloader( 'applescript /js/sh309/scripts/shBrushAppleScript.js?t=1423294217000', 'actionscript3 as3 /js/sh309/scripts/shBrushAS3.js?t=1423294217000', 'bash shell /js/sh309/scripts/shBrushBash.js?t=1423294217000', 'coldfusion cf /js/sh309/scripts/shBrushColdFusion.js?t=1423294217000', 'cpp c /js/sh309/scripts/shBrushCpp.js?t=1423294217000', 'obj-c objc /js/sh309/scripts/shBrushObjC.js?t=1423294217000', 'c# c-sharp csharp /js/sh309/scripts/shBrushCSharp.js?t=1423294217000', 'css /js/sh309/scripts/shBrushCss.js?t=1423294217000', 'delphi pascal /js/sh309/scripts/shBrushDelphi.js?t=1423294217000', 'diff patch pas /js/sh309/scripts/shBrushDiff.js?t=1423294217000', 'erl erlang /js/sh309/scripts/shBrushErlang.js?t=1423294217000', 'groovy /js/sh309/scripts/shBrushGroovy.js?t=1423294217000', 'haxe hx /js/sh309/scripts/shBrushHaxe.js?t=1423294217000', 'java /js/sh309/scripts/shBrushJava.js?t=1423294217000', 'jfx javafx /js/sh309/scripts/shBrushJavaFX.js?t=1423294217000', 'js jscript javascript /js/sh309/scripts/shBrushJScript.js?t=1423294217000', 'perl pl /js/sh309/scripts/shBrushPerl.js?t=1423294217000', 'php /js/sh309/scripts/shBrushPhp.js?t=1423294217000', 'text plain /js/sh309/scripts/shBrushPlain.js?t=1423294217000', 'py python /js/sh309/scripts/shBrushPython.js?t=1423294217000', 'ruby rails ror rb /js/sh309/scripts/shBrushRuby.js?t=1423294217000', 'scala /js/sh309/scripts/shBrushScala.js?t=1423294217000', 'sql /js/sh309/scripts/shBrushSql.js?t=1423294217000', 'vb vbnet /js/sh309/scripts/shBrushVb.js?t=1423294217000', 'xml xhtml xslt html /js/sh309/scripts/shBrushXml.js?t=1423294217000' ); SyntaxHighlighter.all();

eclipse支持html5: 一、创建工程 1、打开Eclipse,菜单选择File->New->Project或者File->New->Other 2、现在会看到类似下面的一个弹出窗口,这个窗口就是告诉所有可选的项目类型。 3、选择Web->Static Web Project 4、点击Next 5、填写项

扩展阅读,根据您访问的内容系统为您准备了以下内容,希望对您有帮助。

HTML5的canvas js内部怎么获取不到toDataURL数据

<body>

<div>

<canvas id="canvas" style="width: 100; height: 100;"></canvas>

<button onclick="transform();">draw</button>

</div>

<script type="text/javascript">

var canvas=document.getElementById("canvas");

function transform(){

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

context.beginPath();

context.moveTo(100, 150);

context.lineTo(450, 50);

context.lineWidth = 10;

context.strokeStyle ="#ff0000";

context.stroke();

alert(context.toDataURL());

}

</script>

</body>

html5 javascript实现canvas里边多图层显示怎么弄?

html5实现canvas多图层举例如下:

<div style="position: relative;">

<canvas id="layer1" width="100" height="100"

style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>

<canvas id="layer2" width="100" height="100"

style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>

</div>

上面两个层layer1和layer2就是两个层,里面可以嵌套图片

html5 javascript实现canvas里边多图层显示怎么弄

html5中的canvas本身的API是不存在图层概念的。要想实现实现多图层功能,必须要使用多个canvas对象,不过这些canvas对象,是在内存中的,而不是在html的元素树中。每个canvas维持一个图层就可以,然后主canvas是负责显示最后的合成的效果。

js动态创建canvas对象如下:

var layer1=document.createElement('canvas');

layer1.width=800;

layer1.height=600;

var layer1_canvas=layer1.getContext('2d');

var layer2=document.createElement('canvas');

layer2.width=800;

layer2.height=600;

var layer2_canvas=layer1.getContext('2d');

layer1_canvas.drawSomething();

layer2_canvas.drawSomething();

canvas.save()//用来显示的canvas

canvas.globalCompositeOperation="destination-over";//设置多个图层如何混合,这个可以百度canvas混合模式,这个和PS是相近的

canvas.drawImage(layer1,0,0,800,600,0,0,800,600)

canvas.drawImage(layer2,0,0,800,600,0,0,800,600)

canvas.restore();

这样就把两个图层绘制在一个图层中,单独改变任一个图层都不会改变其他图层。不明白可追问。

p5.js和html5 canvas两者有何区别?

简单的说,p5.js是一个js类库;canvas是一个html5新增的一个元素,"canvas" 即 "画布",  此元素是为了客户端矢量图形而设计的。它自己没有行为,却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。两者要想绘图,都需执行js代码。仔细看p5的初始代码,

function setup() {

  createCanvas(400, 400);//为html页面创建canvas元素

}

两者的本质都是通过js来实现canvas的表现,p5.js与jquery库无异,将一些常用的功能需求的代码进行封装,以实现代码的简化。也就是任何p5.js可实现的,通过纯canvas的js api都能实现,不过要想实现,往往牺牲得是时间与效率。而p5.js提供了一种仅需少量代码就能实现很炫酷的操作的方法。两者渲染速度比较,理论上应该是一样的,毕竟大家殊途同归嘛,都是通过js来实现的,只要纯js写的足够优化,是会比p5.js快一丢丢的,差异不明显。明显的差异是p5.js在网页加载时需要下载p5.js的类库才能进行操作,而canvas api由于是客户端提供的原因,则不需要。

追问答案通俗易懂,谢谢。

HTML5中JS和CANVAS 时间转换成横坐标

时间数组和温度数组的长度应该是一样的吧,并且都是一一对应的吧追问是的,长度相同,一一对应

  • 本文相关:
  • [Python]续"如何捅破python编程的那层纸之三"
  • [Java]mei
  • [Java]使用NFC分享
  • [C/C++]双向链表的基本操作
  • [C/C++]数字反转
  • [C/C++]数字统计
  • [C/C++]统计在一片文章中某个单词共出现了几处,以及第一处...
  • [C/C++]统计数字
  • [JavaScript]js圆盘记速表
  • [Java]java自定义标签
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved