代码如下: var canvas=document.getElementById("canvas"); var cxt=canvas.getContext("2d"); var img=new Image(); img.src="cat.jpg"; cxt.drawImage(img,10,10,490,382); /* 测试发现一个问题 在浏览器第一次执行的时候经常看不到图片, 在刷新一次后才能看到图片,有谁知道这是什么原因的,麻烦大神告诉我一下啊 .呵呵 */
概述 HTML5中的Canvas并没有直接提供绘制椭圆的方法，下面是对几种绘制方法的总结。各种方法各有优缺，视情况选用。各方法的参数相同： 1.context为Canvas的2D绘图环境对象，2.x为椭圆中心横坐标，3.y为椭圆中心纵坐标，4.a为椭圆横半轴长，5.b为椭圆纵半轴长。 参数方程法 该方法利用椭圆的参数方程来绘制椭圆代码如下://-----------用参数方程绘制椭圆---------------------//函数的参数x,y为椭圆中心；a,b分别为椭圆横半轴、//纵...
1、二次贝塞尔曲线quadraticCurveTo(cpx,cpy,x,y) //cpx，cpy表示控制点的坐标,x，y表示终点坐标； 数学公式表示如下： 二次方贝兹曲线的路径由给定点P0、P1、P2的函数B（t）追踪：代码实例： 代码如下:canvas直线 body, h1{margin:0;} canvas{margin: 20px;} 二次贝塞尔曲线 function draw() { var canvas=document.getElementById('canvas'); var context=canvas.getContext('2d'); //...
本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, “The Basic Rectangle Shape”. 让我们来看一下Canvas内置的简单几何图形 — 矩形的绘制。在Canvas中，绘制矩形有三种方法：填充(fillRect)、描边(StrokeRect)以及清除(clearRect)。当然，我们也可以使用“路径”来描绘包括矩形在内的所有图形。 以下是上述三种方法的API: 1.fillRect(x,y,width,height)。绘制一个从(x,y)开始，宽度为width，高度为heig...
先上效果图：代码如下:canvas钟表body{margin:0;}如果你看到这段文字，说明你的浏览器弱爆了！window.onload=draw;function draw() {var canvas=document.getElementById('canvas');var context=canvas.getContext('2d');context.save(); ///////////////////////////////////保存context.translate(200,200);var deg=2*Math.PI/12; //////////////////////////////////////////////////表盘context.save(); context.beginPa...
现把canvas的知识点总结如下，以便随时查阅。 1、填充矩形 fillRect(x,y,width,height); 2、绘制矩形边框 strokeRect(x,y,width,height); 3、擦除矩形 clearRect(x,y,width,height); 4、填充样式 fillStyle="red"; 样式可以为颜色、渐变和图像。 5、描边样式 strokeStyle="red"; 6、描边线条的宽度 lineWidth=4; 7、线条末端形状 lineCap="butt"; butt(对接)/round(圆)/square(方)，默认情况下是butt; 8、线条相交样式 lineJoin="m...
在HTML5 Canvas中，可以用以下方法描画三阶和二阶的贝塞尔曲线： 代码如下:context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)context.quadraticCurveTo(cpx, cpy, x, y) 贝塞尔曲线是在二维平面上由一个“起始点”，一个“结束点”，以及一个或多个“控制点”定义的曲线。普通的三阶贝塞尔曲线使用两个控制点，而二阶曲线则只使用一个控制点。 要描画二阶贝塞尔曲线，只需设置结束点的坐标和控制点的坐标即可： 代码如下:conte...
DOM是Web前端领域非常重要的组成部分，不仅在处理HTML元素时会用到DOM，图形编程也同样会用到。比如SVG绘图，各种图形都是以DOM节点的形式插入到页面中，这就意味着可以使用DOM方法对图形进行操作。比如有一个元素，可以直接用jquery增加click事件$(#p1).click(function(){…})"。然而这种DOM处理方法在HTML5的Canvas里不再适用，Canvas使用的是另外一套机制，无论在Canvas上绘制多少图形，Canvas都是一个整体，图形本身实际都是Ca...
之前在当耐特的DEMO里看到个打飞机的游戏，然后就把他的图片和音频扒了了下来。。。。自己凭着玩的心情重新写了一个。仅供娱乐哈。。。。。。我没有用框架，所有js都是自己写的。。。。。。所以就可以来当个简单的教程，对那些刚玩canvas的，或许能有些帮助，楼主玩canvas也不是很久，技术不是很好，请见谅哈。闲话不多说，先上DEMO撒：飞机游戏 楼主写这个人纯碎娱乐，没想着写成多正式的游戏哈。步入主题啦：打飞机游戏文件有i...
今天，你将学习一项称为Canvas（画布）的web技术，以及它和文档对象模型（通常被称为DOM）的关联。这项技术非常强大，因为它使web开发人员能够通过使用JavaScript访问和修改HTML元素。 现在你可能想知道为什么我们需要大刀阔斧地使用JavaScript。简而言之，HTML和JavaScript是相互依存的，一些HTML组件，如canvas元素，并不能脱离JavaScript单独使用。毕竟，如果我们不能在上面绘图，那canvas能派什么用处呢？ 为了更好地理解这个概...
本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, “Advanced Path Methods, Arcs” 在Canvas绘图中，“圆弧”既可以是一个整圆，也可以是圆周的一部分。代码如下:context.arc()context.arc(x, y, radius, startAngle, endAngle, anticlockwise)在上述方法描述中，x和y定义圆心，radius定义圆周的半径。startAngle和endAngle以极坐标值表示。anticlockwise（布尔值）定义圆弧的方向。 比如，如果我们想描...
HTML5火的正热，最近有个想法也是要用到HTML的相关功能，所以也要好好学习一把。 好好看了一下Canvas的功能，感觉HTML5在客户端交互的功能性越来越强了，今天看了一下Canvas绘图，下边是几个实例，记下以备后用。 1、使用Canvas绘制直线：XML/HTML Code复制内容到剪贴板> html> head> meta charset="UTF-8"> head> style type="text/css"> canvas{border:dashed 2px #CCC} style> sc...
最近想弄一个网页，把自己学HTML5过程中做的部分DEMO放上去做集合，但是，如果就仅仅做个网页把所有DEMO一个一个排列又觉得太难看了。就想，既然学了canvas，那就来折腾下浏览器，做个小小的开场动画吧。 开场动画的效果，想了一会，决定用粒子，因为觉得粒子比较好玩。还记得以前我写的第一篇技术博文，就是讲文字图片粒子化的：文字图片粒子化 ， 那时就仅仅做的是直线运动，顺便加了一点3D效果。运动公式很简单。所以就想这个开...
你玩过刮刮卡么？一不小心可以中奖的那种。今天我给大家分享一个基于HTML5技术实现的刮刮卡效果，在PC上只需按住鼠标，在手机上你只需按住指头，轻轻刮去图层就可以模拟真实的刮奖效果。源码下载：点击下载 我们利用HTML5的画布Canvas，结合其提供的API，在Canvas元素上绘制一个灰色蒙层，然后通过检测用户鼠标移到和手势来绘制一个透明的图形，这样就能看到Canvas背景下的真实图片，就达到刮刮卡效果。 HTML 我们只需要在页面中加...
Canvas2D自带的曲线方法 最近在研究3D柔体的计算，所以在狂补一些知识。经常会涉及到一些数值分析方面的东西，主要是曲线的各种插值算法。突然想起了Canvas2D本身也是可以绘制曲线的，使用的是二次和三次的贝兹曲线。其实我也一直没用它的过这个方法，现在就来试试吧～ 这篇只是说说简单的曲线绘制，咱就不说一大堆复杂的原理了。况且贝兹曲线这东西的原理本身很简单，看看维基百科就能明白。其实很多绘图工具中的简单曲线绘...