html5 canvas-1.canvas介绍(hello canvas)

html5 canvas-1.canvas介绍(hello canvas)的相关文章

• 
  html5 Canvas画图教程(9)—canvas中画出矩形和圆形

  标签：Web开发

  本文讲一下在canvas中画出矩形和圆形的办法，他们属于基础图形。当然，基础图形本来不止他们，但在canvas中，只有画矩形与圆形不需要用其他方法模拟。 canvas画矩形 1，fillRect与strokeRect fillRect可以直接填充出一个矩形，填充样式是你当前设置的样式；同理strokeRect就是直接描边一个矩形 他们的参数是一致的，依次是（起点x坐标,起点y,矩形的宽，矩形的高）。这里的起点，注意，是指矩形的左上...[ 查看全文 ]

  艾菲克大猫

  421
• 
  html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法

  标签：Web开发

  前面的文章我已经讲了3种在canvas中画曲线的方法：arc,arcTo以及quadraticCurveTo.他们都有一个共同点，就是他们画的曲线都只能偏向一边，今天讲的bezierCurveTo与他们最大的不同点就是有两个控制点，即可以画出S形的曲线了。 bezierCurveTo，也就是所谓的贝赛尔曲线了，如果你学过某些画图工具，就能马上理解。 bezierCurveTo的语法如下 ： ctx.bezierCurveTo(x1,y1,x2,y2,x,y);他的参数我照例解释一下...[ 查看全文 ]

  中国坏男人TMD

  361
• 
  html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因

  标签：Web开发

  接上一篇canvas画线条教程 上次我们讲到，canvas有时候会出现1像素的线条模糊不清且好像更宽的情况，如下图：   这样的线条显然不是我们想要的。 这篇文章的目的就是弄清楚里面的原理，以及解决它。 大家都知道屏幕上最小的显示尺寸就是1像素，虽然小于1像素的东西可能显示不出来，但计算机可不管，他会试着画一下。 其实像素终究来说也是一个单位，假如我们把画布放大到足够大，足以看清楚每个像...[ 查看全文 ]

  19930228520lzw

  2121
• 
  html5 Canvas画图教程(5)—canvas里画曲线之arc方法

  标签：Web开发

  在canvas画线条这篇文章中，我讲了画直线的方法，按理这篇画曲线的文章早该发了，但由于canvas画曲线比较特殊，我还没摸透，所以要一步步尝试。 canvas里画曲线的难点之一，就在于他连曲线的函数就有4个！分别是arc,arcTo,quadraticCurveTo,bezierCurveTo.我从最简单的arc方法讲起吧。 arc的作用是画一个正规的圆弧，可以是一个完整的圆，也可以是一个圆的某一段弧线。 arc的语法如下 ： 代码如下： ...[ 查看全文 ]

  Fortunate帅帅

  271
• 
  HTML5 Canvas——用路径描画线条实例介绍

  标签：Web开发

  原文： http://www.lifelaf.com/blog/?p=371 本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, Using Paths to Create Lines 对于HTML5 Canvas，我们可以使用路径来描画任何图形。路径，简单来说就是一系列的点以及连接这些点的线。任何Canvas上下文只会有一个当前路径，而当context.save()调用时，该当前路径并不会被保存。 路径的开始与结束 调用beginPath()可以开始一个路...[ 查看全文 ]

  奶嘴321奶嘴

  691
• 
  html5中canvas学习笔记2-判断浏览器是否支持canvas

  标签：Web开发

  判断浏览器是否支持canvas，具体代码如下： 代码如下： !DOCTYPE html head meta charset=utf-8 / titlecanvas/title script type='text/javascript' window.onload = function(){ /**判断浏览器是否支持canvas**/ try{ document.createElement('canvas').getContext('2d'); var addDiv = document.createElement('div'); addDiv.innerHTML='支持canvas'; document.body.appendChild(addDiv); ...[ 查看全文 ]

  半世流年丶7

  341
• 
  程序设计HTML5 Canvas API

  标签：Web开发

  代码如下： script type="text/javascript" try { document.createElement("Canvas").getContext("2d"); document.getElementById("support").innerHTML = "OK"; } catch (e) { document.getElementById("support").innerHTML = e.message; } /script 加入Canvas canvas id="diagonal" style="border:1px solid blue;" width="200" height="200"/ 代码如下： ...[ 查看全文 ]

  123yanzipen123

  61
• 
  HTML5 Canvas鼠标与键盘事件demo示例

  标签：Web开发

  演示HTML5 Canvas鼠标事件，获取Canvas对象上的鼠标坐标，演示键盘事件通过键盘控制Canvas上对象移动。 Canvas对象支持所有的JavaScript的鼠标事件，包括鼠标点击(MouseClick), 鼠标按下(Mouse Down), 鼠标抬起(Mouse Up),鼠标移动( Mouse Move)对Canvas添加鼠标事件方式有两种，一种方式是通过API来完成： 代码如下： // mouse event canvas.addEventListener("mousedown",doMouseDown,false); canva...[ 查看全文 ]

  第十三滴菜籽油

  461
• 
  html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法

  标签：Web开发

  继续讲canvas中画曲线的方法，今天讲quadraticCurveTo。 说实话这个方法有点吓人，单从函数名称上都可以初体验。话说，我觉得有必要把这个函数名缩短。 quadratic的意思是二次，即数学中二次元方程那个二次。而ctx.quadraticCurveTo的参数如下： 代码如下： ctx.quadraticCurveTo(x1,y1,x,y); 其中x,y是终点的坐标，而x1,y1是曲线控制点的坐标？什么？你问我起点在哪里？起点在此之前用moveTo确定。 ...[ 查看全文 ]

  异地达州小伙

  441
• 
  html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法

  标签：Web开发

  上一篇文章讲了canvas的arc方法，这一篇讲和他有关的arcTo方法。 arc与arcTo，从名字都能看出来相似。arcTo也是画曲线的方法，而且他画出的曲线也是正圆的一段弧线。但他的参数和arc简直是不共戴天~ ctx.arcTo(x1,y1,x2,y2,radius);arcTo的参数中包括两个点，而且这两个点中并没有表示圆心的点，仅仅最后的参数是圆的半径，表示arcTo和圆有那么点关系。 网上关于arcTo的文章很少，好不容易找到一篇还是外国...[ 查看全文 ]

  场地AAA

  701
• 
  HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)

  标签：Web开发

  HTML5 Canvas中提供了实现图形平移，旋转，放缩的API。 平移(translate) 平移坐标translate(x, y)意思是把(0,0)坐标平移到(x, y)，原来的(0,0)坐标则变成(-x, -y) 图示如下：   任何原来的坐标点p(ox, oy)在translate之后的坐标点为p(ox-x, oy-y),其中点(x, y)为平移 点坐标translate(x, y)。 代码演示： 代码如下： // translate is move the startpoint to centera and back to top left ...[ 查看全文 ]

  东少丶天平

  761
• 
  HTML5中Canvas与SVG的画图原理比较

  标签：Web开发

  canvas 与 SVG都能够使你在浏览器中画图，但它们的基本原理不同。 SVG SVG是一种在XML中描述二维图形的语言。 SVG是基于XML的，意味着在SVG DOM内每一个元素都是可用的。你可以为每一个元素增加JS事件处理器。 在SVG中，每一个图形被记作一个对象。如果一个SVG对象的属性发生改变，浏览器可以自动重新生成图形。 Canvas Canvas能够在fly上画2D图形（使用JS） Canvas能够按照像素重新生成。 在Ca...[ 查看全文 ]

  红叶小廖

  461
• 
  HTML5 Canvas自定义圆角矩形与虚线示例代码

  标签：Web开发

  HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line) 实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示，如何绘制虚线以及控制虚线间隔大小，学会绘制圆角矩形的技巧。 HTML5 Canvas绘制对象中提供的原生功能没有实现绘制圆角矩形与虚线的功能，但是通过JavaScript语言的Object.prototype可以实现对对象CanvasRenderingContext2D添加这两个函数功能。代码的演示效果如下：...[ 查看全文 ]

  smile124578

  331
• 
  HTML5组件Canvas实现图像灰度化(步骤+实例效果)

  标签：Web开发

  新建一个html页面，在body tag之间加入 代码如下： canvas id="myCanvas" Gray Filter/canvas 添加一段最简单的JavaScript 脚本 代码如下： pre name="code" class="javascript"window.onload = function() { var canvas = document.getElementById("myCanvas"); span style="white-space:pre" /span// TODO: do something here } 从Canvas对象获取绘制对象上下文Context的代码如下： 代码...[ 查看全文 ]

  昨日黄昏以后

  81
• 
  html5中canvas学习笔记1-画板的尺寸与实际显示尺寸

  标签：Web开发

  在canvas中当在canvas上写width和height时为canvas的实际画板大小，默认情况下width为300px，height为150px。 在style里面写css样式的时候widht和height为实际显示尺寸大小。 现在以用canvas画一个对角线为例 ： 代码如下： !DOCTYPE html head meta charset=utf-8 / titlecanvas/title script type='text/javascript' window.onload = function(){ getCanvas(); }; //canvase绘图 function g...[ 查看全文 ]

  完和妹

  251
• 
  基于HTML5 Canvas:字符串,路径,背景,图片的详解

  标签：Web开发

  创建一个Canvas画布的方法如下： 代码如下： canvas id=canvas width=600 height=400/canvas 可以在标签中添加canvas标签不可用时的替代文本，如下所示： 代码如下： canvas id=canvas width=600 height=400 pYour browserdoes not support the canvas element./p /canvas 目前新版本的各类浏览器已经逐步开始支持HTML5，所以在开始使用之前请确保你的浏览器是新版本的Chrome、Firefox或者是IE9以上...[ 查看全文 ]

  qian2832497986

  441
• 
  HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)

  标签：Web开发

  演示HTML5 Canvas Fill 与Stroke文字效果，基于Canvas如何实现纹理填充与描边。 一：颜色填充与描边 颜色填充可以通过fillStyle来实现，描边颜色可以通过strokeStyle来实现。简单示例 如下： 代码如下： // fill and stroke text ctx.font = '60pt Calibri'; ctx.lineWidth = 3; ctx.strokeStyle = 'green'; ctx.strokeText('Hello World!', 20, 100); ctx.fillStyle = 'red'; ctx.fillText('...[ 查看全文 ]

  飞过の海

  1981
• 
  HTML5 Canvas渐进填充与透明实现图像的Mask效果

  标签：Web开发

  详细解释HTML5 Canvas中渐进填充的参数设置与使用，Canvas中透明度的设置与使用，结合渐进填充与透明度支持，实现图像的Mask效果。 一：渐进填充(Gradient Fill) Canvas支持两种渐进填充方式，一种为线性渐进填充(Line Gradient Fill)，另外一种称 为经向渐变填充(RadialGradient Fill)。其API分别为： createLinearGradient(x1, y1, x2, y2); 其中x1,y1为第一个点坐标，x2,y2为第二个点坐标。 creat...[ 查看全文 ]

  lly5900

  1771
• 
  html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形

  标签：Web开发

  上一篇文章我讲了画矩形和圆形的方法，他们都有原生的canvas绘图函数可完成。而本文讲的圆角矩形则只有通过其他方法模拟出来。 一个正常的圆角矩形，我们先假设他四个角的圆角弧度一致因为这样比较好画。我们动用把面拆成线条的能力，很容易就能发现圆角矩形其实是由4条钩子般的曲线组成。 提到钩子，如果你看过我介绍arcTo的文章，那么可能你一下就明白了这种图形就可以用arcTo画出来。 我讲arcTo的时...[ 查看全文 ]

  农民工全体

  521
• 
  html5 canvas里绘制椭圆并保持线条粗细均匀的技巧

  标签：Web开发

  Canvas里绘制椭圆是一个很常见的需求，比较新的HTML Canvas 2D Context W3C草案里面新增了ellipse方法绘制椭圆，但是目前大多数浏览器还没有实现该方法，所以需要用arc或者arcTo方法结合scale变形来绘制椭圆。 示例代码： 代码如下： canvas width="400" height="300"/canvas script var ctx = documentquerySelector('canvas')getContext('2d'); ctxlineWidth = "10"; ctxscale(1,2); ctx...[ 查看全文 ]

  cuansuunai832

  121