`
lizaochengwen
  • 浏览: 662507 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

复习canvas

阅读更多
今天,项目中用到html5中的canvas,以前,在网上找到一个canvas画板的例子,以下是例子的代码:
var canvas = document.getElementsByTagName('canvas')[0]; 
var context = canvas.getContext('2d'); 
 
var linex = new Array();  
var liney = new Array();  
var linen = new Array(); 
var defaultColor='#000';
var size=0;

var lastX = -1;  
var lastY = -1;  
var hue = 0;  
var flag = 0;  
function touchStart(e) {
	e.preventDefault();
	var touches = e.changedTouches,
		i = 0, l = touches.length, touch;
	for (; i < l; i++) {
		touch = touches[i];
		flag = 1;    //代表鼠标是否按下 1 按下 0释放
		size=linex.length;
		linex.push(touch.pageX-$("#canv").offset().left);  
		liney.push(touch.pageY-$("#canv").offset().top);  
		linen.push(0);  

	}
}

function touchMove(e) {
	e.preventDefault();
	var touches = e.targetTouches,
		i = 0, l = touches.length, touch;
	for (; i < l; i++) {
		touch = touches[i];
   if (flag == 1) {  
   linex.push(touch.pageX-$("#canv").offset().left);  
   liney.push(touch.pageY-$("#canv").offset().top);  
   linen.push(1);  
   context.save();  
   
   context.translate(context.canvas.width/2, context.canvas.height/2);  
   context.translate(-context.canvas.width/2, -context.canvas.height/2);  
   context.beginPath();  
   context.lineWidth = 5 + Math.random() * 10;  

   for (var i=size;i<linex.length;i++) {  
		 lastX = linex[i];  
		 lastY = liney[i];  
		 if (linen[i] == 0) {  
			context.moveTo(lastX,lastY);  
		 } else {  
			context.lineTo(lastX,lastY);  
		 }  
   }  

   context.strokeStyle = defaultColor;  
   context.shadowColor = 'white';  
   context.shadowBlur = 5;  
   context.stroke();  
  // context.restore();  
}  
	}

}

function touchEnd(e) {
	var touches = e.changedTouches,
		i = 0, l = touches.length, touch;
	for (;i < l; i++) {
		touch = touches[i];
		flag = 0;  
		linex.push(touch.pageX-$("#canv").offset().left);  
		liney.push(touch.pageY-$("#canv").offset().top);  
		linen.push(0);
	}

}

canvas.addEventListener("touchstart", touchStart, false);
canvas.addEventListener("touchmove", touchMove, false);
canvas.addEventListener("touchend", touchEnd, false);


这个例子实现了以前的项目需求,但一直以来,对其不是很理解。今天重新翻出来,实现新的项目需求,再次看的时候,感觉很轻松,一看就很明了。进而感觉canvas这不错,很好玩,也不是很难。在网上,找了些教程,基本的,看看都很容易理解。在画板中,清楚里面画得痕迹,可以通过context.clearRect ( 0 , 0 , canvas.width , canvas.height )来实现。其他的感觉没有可讲,自己认真想想,慢慢体会,可能印象会更加深刻。
分享到:
评论

相关推荐

    4.2 绘制米字格,复习canvas|canvas项目综合实战|Canvas图形、动画、游戏开发从入门到精通全系列课程

    4.2_绘制米字格,复习canvas|canvas项目综合实战|Canvas图形、动画、游戏开发从入门到精通全系列课程

    Web前端技术(期末复习 选填、判断、简答、编程等超全总结).zip

    了解HTML5的新特性,如音频、视频元素,canvas画布,离线存储等。 2. CSS(Cascading Style Sheets):CSS负责网页的样式和布局,包括选择器、盒模型、布局方式(流体布局、网格布局、Flexbox、Grid)、响应式设计...

    canvasGame:一些使用canvas制作的小游戏

    在IT领域,JavaScript是一种广泛使用的前端编程语言,它在网页交互、动态效果和游戏开发等方面发挥...这个项目对于初学者来说是一个很好的实践平台,对于有经验的开发者来说,则是一个复习和探索canvas特性的宝贵资源。

    复习资料html+css+sql.zip

    HTML5是其最新的版本,它在原有的基础上增加了许多新特性,如离线存储、拖放功能、媒体元素、 canvas 绘图以及新的表单控件等,极大地提升了开发效率和用户体验。 CSS(Cascading Style Sheets)是用于描述HTML或...

    201424070141 颜唯希 基于HTML5的考研复习平台设计与实现1

    同时,作者也考虑了不同用户群体的使用习惯,设计了友好的用户交互界面,并通过Canvas技术实现了动态的图形界面,让复习过程更加生动有趣。 平台设计实现后,作者还进行了详细的测试,以确保各项功能的正常运行和...

    canvas 基础之图像处理的使用

    借此机会,复习下 canvas 基础中的图像处理。 基础 API canvas 的图像处理能力通过 ImageData 对象来处理像素数据。主要的 API 如下: createImageData():创建一个空白的 ImageData 对象 getImageData():获取...

    Canvas to Quizlet-crx插件

    Canvas to Quizlet-crx插件是一款专为英语用户设计的浏览器扩展程序,它主要功能是帮助用户将在线学习平台Canvas中的测验页面转换为Quizlet的测验问题,以更高效、灵活的方式进行复习和学习。 Canvas是一个广泛使用...

    java web期末复习

    HTML5引入了许多新特性,如canvas绘图、video音频视频播放、离线存储等,而CSS3提供了更多的布局模式(如Flexbox和Grid)和动画效果。熟练编写语义化的HTML和优雅的CSS,对于创建响应式和易于维护的网页至关重要。 ...

    利用三角函数在canvas上画虚线的方法

    顺便复习一下三角函数岂不美滋滋   var context=document.getElementById(canvas).getContext(2d); function drawDashedLine(context,x1,y1,x2,y2,dashlength){ dashlength=dashlength===undefined?5:dashlength...

    HTML 的复习资料

    现代的HTML5引入了许多新的元素和功能,如音频和视频嵌入(`&lt;audio&gt;`、`&lt;video&gt;`)、离线存储(`&lt;applicationCache&gt;`)、画布(`&lt;canvas&gt;`)和图形绘制(SVG)。同时,HTML5还强化了表单控件,如日期选择器(`...

    计算机图形学期末考试复习资料二.pdf

    期末考试复习资料二中的内容涉及了这门课程的一些核心概念和技术,包括图形的表示方法、颜色模式、图形与图像的区别、分辨率、图形碰撞检测以及实际的编程实践。 首先,试题涉及到直线的属性,包括线型(如none、...

    HTML5考试复习资料.pdf

    6. 在Canvas中,为了在正中间填充线性渐变色,`addColorStop()`方法的X参数应为0.5,代表50%的位置。 7. `cxt.arc()`方法用于绘制圆形,参数顺序为圆心X坐标、圆心Y坐标、圆半径、开始角度、结束角度和是否顺时针。...

    EduStrap : Quiz Downloader For Canvas-crx插件

    EduStrap是一款专为Canvas平台设计的Quiz Downloader For Canvas浏览器插件,它使得教育工作者和学生能够方便地离线下载测验内容,以便在没有网络连接的情况下也能继续学习和复习。这款插件主要面向英语用户,为...

    HTML5.0总复习课的案例资源

    5. 画布和SVG图形:&lt;canvas&gt;元素提供了动态图形绘制的能力,允许JavaScript进行像素级别的操作,适用于游戏开发和数据可视化。而SVG(Scalable Vector Graphics)则提供了矢量图形的支持,图像质量不会因缩放而降低...

    S1笔试复习题 有答案的 全部学科

    5. **HTML5新特性**:如`&lt;canvas&gt;`用于绘图,`&lt;video&gt;`和`&lt;audio&gt;`处理多媒体,离线存储(localStorage和sessionStorage)等。 整体来看,这份S1笔试复习题涵盖了计算机科学中的多个重要主题,对于准备相关考试或...

    JAVA期末复习题27.doc

    5. Java容器:`ScrollPane`、`Canvas`、`Dialog`都是Java容器,而`Applet`不是容器,它是一个可以嵌入网页的Java小程序。 6. 构造函数:构造函数无返回类型,其名称必须与类名相同,用于初始化对象。在创建新对象时...

    FZU软件工程web课程复习资料-整理

    HTML5 是最新的 HTML 标准,引入了许多新的特性和功能,例如视频、音频、canvas 等。 3. 常用标记 HTML 中有许多常用的标记,例如标题标记、段落标记、列表标记等。 4. 核心属性 HTML 元素可以具有多种属性,...

    移动网站开发 复习资料

    Canvas 是基于像素的,其性能取决于设备的分辨率,适用于动态渲染,如游戏场景,但不擅长处理复杂的图形。相反,SVG 使用矢量图形,不依赖分辨率,因此更适合创建清晰的图形,如地图或图标。SVG 支持事件处理器,...

    j2me考点,指导您如何复习J2ME考试,帮助你更好地通过考试

    以下是一些重要的知识点,它们将帮助你有效地复习并顺利通过考试。 1. **MIDlet套件**: MIDlet套件是J2ME应用的基本单位,由Java类文件、清单文件、图像和数据文件以及JAD文件组成。JAR文件中包含所有代码和资源...

Global site tag (gtag.js) - Google Analytics