<canvas> 元素

<canvas id="tutorial" width="150" height="150"></canvas>

1．<canvas> 标签只有两个属性—— width和height，默认宽度为300像素和高度为150像素．

２. </canvas> 标签不可省．

渲染上下文（The rendering context）

 var canvas = document.getElementById('tutorial');

 var ctx = canvas.getContext('2d');

检查支持性

 var canvas = document.getElementById('tutorial');

 if (canvas.getContext){

   var ctx = canvas.getContext('2d');

   // drawing code here

 } else {

   // canvas-unsupported code here

 }

一个模板骨架

 <html>

   <head>

     <title>Canvas tutorial</title>

     <script type="text/javascript">

       function draw(){

         var canvas = document.getElementById('tutorial');

         if (canvas.getContext){

           var ctx = canvas.getContext('2d');

         }

       }

     </script>

     <style type="text/css">

       canvas { border: 1px solid black; }

     </style>

   </head>

   <body onload="draw();">

     <canvas id="tutorial" width="150" height="150"></canvas>

   </body>

 </html>

绘制矩形

 fillRect(x, y, width, height)    绘制一个填充的矩形

 strokeRect(x, y, width, height)    绘制一个矩形的边框

 clearRect(x, y, width, height)    清除指定矩形区域，让清除部分完全透明

绘制路径 

图形的基本元素是路径，路径是通过不同颜色和宽度的线段或者曲线相连形成的不同形状打点的集合，需要以下步骤．

  1. 创建路径起点
  2. 使用画图命令画出路径
  3. 封闭路径
  4. 通过描边或者填充区域来渲染图形

所用函数：

  • beginPath()，新建路径
  • closePath()，闭合路径
  • stroke()，通过线条绘制图形轮廓
  • fill()，通过填充路径的内容区域生成实心的图形

绘制一个三角形

 function draw() {

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

   if (canvas.getContext){

     var ctx = canvas.getContext('2d');

     ctx.beginPath();

     ctx.moveTo(75,50);

     ctx.lineTo(100,75);

     ctx.lineTo(100,25);

     ctx.fill();

   }

 }

注意：只需使用两次lineTo() 函数

常用画线函数：

  • moveTo(x, y)　　将笔触移动到指定的坐标x以及y上。
  • lineTo(x, y)　　绘制一条从当前位置到指定x以及y位置的直线。
  • rect(x, y, width, height)　　绘制一个左上角坐标为（x,y），宽高为width以及height的矩形。
  • arc(x, y, radius, startAngle, endAngle, anticlockwise)　　

　　画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。

  • arcTo(x1, y1, x2, y2, radius)　　根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。

注意：arc()函数中的角度单位是弧度，不是度数。角度与弧度的js表达式:radians=(Math.PI/180)*degrees。

贝塞尔（bezier）以及二次贝塞尔

  • quadraticCurveTo(cp1x, cp1y, x, y)　　绘制二次贝塞尔曲线，x,y为结束点，cp1x,cp1y为控制点。
  • bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)　　绘制三次贝塞尔曲线，x,y为结束点，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二。

如图：

实例：

二次贝塞尔曲线

 function draw() {

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

   if (canvas.getContext) {

     var ctx = canvas.getContext('2d');

     // Quadratric curves example

     ctx.beginPath();

     ctx.moveTo(75,25);

     ctx.quadraticCurveTo(25,25,25,62.5);

     ctx.quadraticCurveTo(25,100,50,100);

     ctx.quadraticCurveTo(50,120,30,125);

     ctx.quadraticCurveTo(60,120,65,100);

     ctx.quadraticCurveTo(125,100,125,62.5);

     ctx.quadraticCurveTo(125,25,75,25);

     ctx.stroke();

   }

 }

三次贝塞尔曲线

 function draw() {

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

   if (canvas.getContext){

     var ctx = canvas.getContext('2d');

     // Quadratric curves example

     ctx.beginPath();

     ctx.moveTo(75,40);

     ctx.bezierCurveTo(75,37,70,25,50,25);

     ctx.bezierCurveTo(20,25,20,62.5,20,62.5);

     ctx.bezierCurveTo(20,80,40,102,75,120);

     ctx.bezierCurveTo(110,102,130,80,130,62.5);

     ctx.bezierCurveTo(130,62.5,130,25,100,25);

     ctx.bezierCurveTo(85,25,75,37,75,40);

     ctx.fill();

   }

 }

综合实例

 function draw() {

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

   if (canvas.getContext){

     var ctx = canvas.getContext('2d');

     roundedRect(ctx,12,12,150,150,15);

     roundedRect(ctx,19,19,150,150,9);

     roundedRect(ctx,53,53,49,33,10);

     roundedRect(ctx,53,119,49,16,6);

     roundedRect(ctx,135,53,49,33,10);

     roundedRect(ctx,135,119,25,49,10);

     ctx.beginPath();

     ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false);

     ctx.lineTo(31,37);

     ctx.fill();

     for(var i=0;i<8;i++){

       ctx.fillRect(51+i*16,35,4,4);

     }

     for(i=0;i<6;i++){

       ctx.fillRect(115,51+i*16,4,4);

     }

     for(i=0;i<8;i++){

       ctx.fillRect(51+i*16,99,4,4);

     }

     ctx.beginPath();

     ctx.moveTo(83,116);

     ctx.lineTo(83,102);

     ctx.bezierCurveTo(83,94,89,88,97,88);

     ctx.bezierCurveTo(105,88,111,94,111,102);

     ctx.lineTo(111,116);

     ctx.lineTo(106.333,111.333);

     ctx.lineTo(101.666,116);

     ctx.lineTo(97,111.333);

     ctx.lineTo(92.333,116);

     ctx.lineTo(87.666,111.333);

     ctx.lineTo(83,116);

     ctx.fill();

     ctx.fillStyle = "white";

     ctx.beginPath();

     ctx.moveTo(91,96);

     ctx.bezierCurveTo(88,96,87,99,87,101);

     ctx.bezierCurveTo(87,103,88,106,91,106);

     ctx.bezierCurveTo(94,106,95,103,95,101);

     ctx.bezierCurveTo(95,99,94,96,91,96);

     ctx.moveTo(103,96);

     ctx.bezierCurveTo(100,96,99,99,99,101);

     ctx.bezierCurveTo(99,103,100,106,103,106);

     ctx.bezierCurveTo(106,106,107,103,107,101);

     ctx.bezierCurveTo(107,99,106,96,103,96);

     ctx.fill();

     ctx.fillStyle = "black";

     ctx.beginPath();

     ctx.arc(101,102,2,0,Math.PI*2,true);

     ctx.fill();

     ctx.beginPath();

     ctx.arc(89,102,2,0,Math.PI*2,true);

     ctx.fill();

   }

 }

 // A utility function to draw a rectangle with rounded corners.

 function roundedRect(ctx,x,y,width,height,radius){

   ctx.beginPath();

   ctx.moveTo(x,y+radius);

   ctx.lineTo(x,y+height-radius);

   ctx.quadraticCurveTo(x,y+height,x+radius,y+height);

   ctx.lineTo(x+width-radius,y+height);

   ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);

   ctx.lineTo(x+width,y+radius);

   ctx.quadraticCurveTo(x+width,y,x+width-radius,y);

   ctx.lineTo(x+radius,y);

   ctx.quadraticCurveTo(x,y,x,y+radius);

   ctx.stroke();

 }

html5 canvas 笔记一（基本用法与绘制图形）的更多相关文章

  1. Html5 Canvas笔记(1)-CanvasAppTemplate代码

    学了一段时间的Html5 Canvas,现想一段一段的将学习笔记整理出来放上来,先整理一段Canvas的模版文件代码,以后建立Canvas程序就不用重新写这些代码了,当然最好是将这个Html代码保存到 ...

  2. Html5 Canvas笔记(3)-Canvas状态

    p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...

  3. html5 canvas 笔记三（绘制文本和图片）

    绘制文本 fillText(text, x, y [, maxWidth])   在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的. strokeText(text, x, y [, ma ...

  4. html5 canvas中CanvasGradient对象用法

    html5 中canvas提供了强大的渲染样式,可以实现一些比较复杂的样式设置,今天学习了CanvasGradient对象可以实现一个颜色的渐变 CanvasGradient对象可以实现两种不同形式的 ...

  5. html5 canvas 笔记五（合成与裁剪）

    组合 Compositing globalCompositeOperation syntax: globalCompositeOperation = type 注意:下面所有例子中,蓝色方块是先绘制的 ...

  6. html5 canvas 笔记四（变形 Transformations）

    绘制复杂图形必不可少的方法 save() 保存 canvas 状态 restore() 恢复 canvas 状态 Canvas 的状态就是当前画面应用的所有样式和变形的一个快照. Canvas 的状态 ...

  7. Html5 Canvas笔记(2)-Canvas绘图

    用Canvas API绘图,需要画图形的边线并设置内部区域填充,边线英文语法对应stroke,填充对应fill,在后面我们会频繁看到这2个英文单词的出现.Canvas API内置的形状绘图函数比较少, ...

  8. HTML5 Canvas ( 圆和切点曲线的绘制 ) arc, arcTo

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. html5 canvas 笔记二（添加样式和颜色）

    色彩 Colors fillStyle = color 设置图形的填充颜色. strokeStyle = color 设置图形轮廓的颜色. 透明度 Transparency globalAlpha = ...

随机推荐

  1. Java 对象内存分配与回收

    JVM内存区域模型: * 程序计数器,内存区域极小,是当前线程的字节码执行行号指示器: * 虚拟机栈.本地方法栈,即平时所说的“栈”,是虚拟机用来执行方法(包括Java.非Java方法)时,使用的临时 ...

  2. ASP: VS2015 + IIS Express 10 学习笔记

    首先搞清楚 ASP 与 ASP.NET 的区别(.asp与.aspx). https://msdn.microsoft.com/en-us/library/ms973813.aspx 环境配置: ht ...

  3. curl获得http响应码 302 和绑定host

    shell curl 取得HTTP返回的状态 获取状态码 curl -I -m 10 -o /dev/null -s -w %{http_code} www.baidu.com 获取时间   curl ...

  4. 查看oracle 数据库的DBID

    (1)使用rman查看$ rman target /Recovery Manager: Release 11.2.0.4.0 - Production on Fri Jun 12 03:20:19 2 ...

  5. AVAudioPlayer init 报错： Error Domain=NSOSStatusErrorDomain Code=1937337955

    Error Domain=NSOSStatusErrorDomain Code=1937337955 原因: 音频文件的格式不规范导致 对于iOS7以上的系统(含iOS7),在确定文件格式的情况下可以 ...

  6. Java基础之访问文件与目录——移动或复制文件和目录（MoveAndCopyFiles）

    控制台程序,创建和删除目录以及复制和移动文件. import java.nio.file.*; import java.nio.file.attribute.*; import java.io.IOE ...

  7. Android Support Font 安卓系统支持字体(配图)

    测试了一台安卓机器,发现所有字体显示都一样.

  8. shell学习笔记（2）替换命令··与（）的区别

    ·CMD·在执行的时候,shell不管··中的内容是什么,先进性解释,再把解释后的最终结果送给shell,如果解释后的结果不是shell可以行的命令,就会报错.但是仅仅把cmd的执行结果作为文本输出, ...

  9. bzoj4448 [Scoi2015]情报传递

    第一问不解释,对于第二问的处理,可以使用cdq分治,假设分治的询问区间是[L,R],那么我们对于标号在[L,mid]的修改操作赋予一个权值,因为在当前[L,R]中[L,mid]的修改操作只会对[mid ...

  10. WEB-INF/views/menu/list.jsp (line: 26, column: 58) equal symbol expected

    根本原因是由于单引号和双引号的混乱使用导致的. 解决办法: 将双引号里面的双引号改成单引号: 单引号里面的双引号该成单引号. 我的问题好像又不是这样的,<c:forEach var=" ...