不支持的时候记得：

  1. <canvas id="stockGraph" width="150" height="150">
  2.   current stock price: $3.15 +0.15
  3. </canvas>
  4.  
  5. <canvas id="clock" width="150" height="150">
  6.   <img src="data:images/clock.png" width="150" height="150" alt=""/>
  7. </canvas>

中间的内容是不支持canvas显示的内容。

下面检查是否可以使用canvas

  1. var canvas = document.getElementById('tutorial');
  2.  
  3. if (canvas.getContext){
  4.   var ctx = canvas.getContext('2d');
  5.   // drawing code here
  6. } else {
  7.   // canvas-unsupported code here
  8. }

HTML Canvas Coordinates

Canvas Coordinates

The HTML canvas 是一个二维空间的栅格

左上角的坐标是0,0

fillRect(0,0,150,75)：从（0,0）开始画一个150x75 pixels 的矩形

.fillRect(x, y, width, height) 画一个实心矩形

.strokeRect(x, y, width, height) 画一个矩形边框

.clearRect(x, y, width, height) 清楚指定的矩形区域

Drawing paths

  • fill()用当前fillstyle样式天聪
  • stroke()用strokeStyle样式描边
  • clip():剪切，一旦一区域被剪切之后，所有的绘画只能在被剪切的区域进行，如果你想在原来的画布（被剪切之前的画布）画画，那么久将画布save()之后restore()。而且剪切只能是path限制shape的展示，例如：
  1. var c = document.getElementById("canvas");
  2. var ctx = c.getContext("2d");
  3. // Clip a rectangular area
  4. ctx.rect(50, 20, 200, 120);
  5. ctx.stroke();
  6. ctx.clip();
  7. // Draw red rectangle after clip()
  8. ctx.fillStyle = "red";
  9. ctx.fillRect(0, 0, 150, 100);

  • isPointInPath(x,y) （x,y）是否在path上
  • isPointInStroke(x,y) (x,y)是否在描边上
  1. ctx.rect(10, 10, 100, 100);
    ctx.isPointInPath(10,10);
  2. ctx.stroke();
  3. console.log(ctx.isPointInStroke(10, 10)); // true 

Draw a Line/circle

步骤：

  1. 创建一个path——beginPath()
  2. 使用绘画命令在path上画画
  3. 关闭path——closePath()
  4. 一旦path被创建，你可以填充fill()它们亦或对它们进行描边stroke()
  • moveTo(x,y)将开始画画的点转移到（x,y）上
  • lineTo(x,y)从起点画一条到(x,y)的直线
  • bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)和quadraticCurveTo(cpx, cpy, x, y)画二次曲线和贝塞尔曲线，控制点(cp1x,cp2x)和(cp2x,cp2y)亦或（cpx,cpy）结束点(x,y)
  • arc(x, y, radius, startAngle, endAngle, anticlockwise) : 圆心(x,y)半径r开始角度startAngle结束角度endAngle，顺时针方向（最后一个参数默认false，如果设置成true则表示逆时针方向）
  • arcTo(x1,y1,x2,y2,radius) (x1,y1)和(x2,y2)连接成直线，在给予的控制点和半径上画一条曲线

画一条线，你必须使用“墨水”的方法，例如stroke()描边，否则画的path是不可见的。

Transformations

  • scale(scalewidth,scaleheight);1=100%, 0.5=50%, 2=200%, etc.
  • rotate(angle);旋转角度是弧度制，将角度转换成弧度制：角度*Math.PI/180.
  • translate(x,y);更改中心坐标位置
  • transform(水平scale倍数,水平倾斜倍数，垂直倾斜倍数,垂直scale倍数,水平移动距离，垂直移动距离)，默认是transform(1,0,0,1,0,0)
  • setTransform()上面的方法如果多次调用，每次调用时修改的基准是在上一次调用之后已变形的基准上进行的，setTransform则每次调用时候都将清除上一次调用transform对于矩形矩阵的改变，重新置于标准的transform(1,0,0,1,0,0)。
  1. var c = document.getElementById("myCanvas");
  2. var ctx = c.getContext("2d");
  3.  
  4. ctx.transform(1,0, 0, 1, 30, 10);
  5. ctx.fillStyle = "red";
  6. ctx.fillRect(0, 0, 250, 100);
  7.  
  8. ctx.transform(1,0, 0, 1, 30, 10);
  9. ctx.fillStyle = "blue";
  10. ctx.fillRect(0, 0, 250, 100);

如果在fillRect蓝色之前用setTransform取代上面的transform

  1. ctx.transform(1,0, 0, 1, 30, 10);
  2. ctx.fillStyle = "red";
  3. ctx.fillRect(0, 0, 250, 100);
  4.  
  5. ctx.setTransform(1,0, 0, 1, 30, 10);
  6. ctx.fillStyle = "blue";
  7. ctx.fillRect(0, 0, 250, 100);

Canvas - Gradients

j渐变可以用于填充形状线条等。

  • createLinearGradient(x,y,x1,y1) - 线型渐变
  • createRadialGradient(x,y,r,x1,y1,r1) - 放射状/圆形渐变

渐变对象需要设置两个亦或以上的颜色。使用addColorStop() 确定颜色的位置（0-1）和颜色。

将渐变赋值给属性fillstyle亦或strokeStyle，然后画出形状（规则几何，文本或线条）

  1. var c=document.getElementById("myCanvas");
  2. var ctx=c.getContext("2d");
  3.  
  4. // Create gradient
  5. var grd=ctx.createLinearGradient(0,0,200,0);
  6. grd.addColorStop(0,"red");
  7. grd.addColorStop(1,"white");
  8.  
  9. // Fill with gradient
  10. ctx.fillStyle=grd;
  11. ctx.fillRect(10,10,150,80);

Drawing Text on the Canvas

  • font - 字体
  • textBaseline——基准线，如图
  • textAlign——对其方式，如图：
  • fillText(text,x,y) - 实心字,从距离画布左边x和距离画布上面y距离处开始写字
  • strokeText(text,x,y) - 空心字
  1. var canvas = document.getElementById("myCanvas");
  2. var ctx = canvas.getContext("2d");
  3. ctx.font = "30px Comic Sans MS";
  4. ctx.fillStyle = "red";
  5. ctx.textAlign = "center";
  6. ctx.fillText("Hello World", canvas.width/2, canvas.height/2);

Canvas - Images

  • drawImage(image,x,y)——不能再图片加载之前调用此方法
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4.  
  5. <p>Image to use:</p>
  6.  
  7. <img id="scream" width="220" height="277"
  8. src="pic_the_scream.jpg" alt="The Scream">
  9.  
  10. <p>Canvas:</p>
  11.  
  12. <canvas id="myCanvas" width="240" height="297"
  13. style="border:1px solid #d3d3d3;">
  14. Your browser does not support the HTML5 canvas tag.
  15. </canvas>
  16.  
  17. <script>
  18. window.onload = function() {
  19.     var canvas = document.getElementById("myCanvas");
  20.     var ctx = canvas.getContext("2d");
  21.     var img = document.getElementById("scream");
  22.    ctx.drawImage(img, 10, 10);
  23. };
  24. </script>
  25.  
  26. </body>
  27. </html>

例子：

画一个动态时钟

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4.  
  5. <canvas id="canvas" width="400" height="400"
  6. style="background-color:#333">
  7. </canvas>
  8.  
  9. <script>
  10. var canvas = document.getElementById("canvas");
  11. var ctx = canvas.getContext("2d");
  12. var radius = canvas.height / 2;//设置半径为画布高度一半
  13. ctx.translate(radius, radius); //将画布起点从左上角设置到画布中心，因为设置的画布宽度和高度一样，所以(radius,radius)等于(200,200)
  14. radius = radius * 0.90 //时钟最外面的圆的半径
  15. setInterval(drawClock, 1000); //每隔一秒调用下面的函数
  16.  
  17. function drawClock() {
  18.   drawFace(ctx, radius);  //绘制表面
  19.   drawNumbers(ctx, radius); //绘制数字
  20.   drawTime(ctx, radius);  //绘制指针
  21. }
  22.  
  23. function drawFace(ctx, radius) {
  24.   var grad;
  25.   ctx.beginPath(); //开始画线条
  26.   ctx.arc(0, 0, radius, 0, 2*Math.PI); //原型(0,0),半径radius，从0度到360度画一个圆圈
  27.   ctx.fillStyle = 'white'; //背景颜色白色
  28.   ctx.fill(); //填充
  29.   grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05); //放射型渐变
  30.   grad.addColorStop(0, '#333');
  31.   grad.addColorStop(0.5, 'white');
  32.   grad.addColorStop(1, '#333');
  33.   ctx.strokeStyle = grad;//线条样式
  34.   ctx.lineWidth = radius*0.1;//线条宽度
  35.   ctx.stroke();//填充线条
  36.   ctx.beginPath();
  37.   ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);//画表盘中间的圆点
  38.   ctx.fillStyle = '#333';
  39.   ctx.fill();
  40. }
  41.  
  42. function drawNumbers(ctx, radius) {
  43.   var ang;
  44.   var num;
  45.   ctx.font = radius*0.15 + "px arial";
  46.   ctx.textBaseline="middle";
  47.   ctx.textAlign="center";
  48.   for(num = 1; num < 13; num++){ //1-12
  49.     ang = num * Math.PI / 6; //以30度为一个划分
  50.     ctx.rotate(ang);//顺时针旋转画布度
  51.     ctx.translate(0, -radius*0.85);//在已经旋转的画布上设置中心为当前中心的垂直正上方
  52.     ctx.rotate(-ang);//逆时针旋转画布，以上三步目的是设置文字书写的中心点
  53.     ctx.fillText(num.toString(), 0, 0);
  54.     ctx.rotate(ang);
  55.     ctx.translate(0, radius*0.85);
  56.     ctx.rotate(-ang);
  57.   }
  58. }
  59.  
  60. function drawTime(ctx, radius){
  61.     var now = new Date();
  62.     var hour = now.getHours();
  63.     var minute = now.getMinutes();
  64.     var second = now.getSeconds();
  65.     //hour
  66.     hour=hour%12;
  67.     hour=(hour*Math.PI/6)+
  68.     (minute*Math.PI/(6*60))+
  69.     (second*Math.PI/(360*60));
  70.     drawHand(ctx, hour, radius*0.5, radius*0.07);
  71.     //minute
  72.     minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
  73.     drawHand(ctx, minute, radius*0.8, radius*0.07);
  74.     // second
  75.     second=(second*Math.PI/30);
  76.     drawHand(ctx, second, radius*0.9, radius*0.02);
  77. }
  78.  
  79. function drawHand(ctx, pos, length, width) {
  80.     ctx.beginPath();
  81.     ctx.lineWidth = width;
  82.     ctx.lineCap = "round";
  83.     ctx.moveTo(0,0);
  84.     ctx.rotate(pos);
  85.     ctx.lineTo(0, -length);
  86.     ctx.stroke();
  87.     ctx.rotate(-pos);
  88. }
  89. </script>
  90.  
  91. </body>
  92. </html>

科赫雪花：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5. </head>
  6. <body>
  7. <canvas id="my_canvas_id" width="1000" height="500"></canvas>
  8. <script>
  9.     var canvas=document.getElementById("my_canvas_id");
  10.     var c=canvas=canvas.getContext('2d');
  11.  
  12.     var deg=Math.PI/180; //用于角度制到弧度制的转换
  13.  
  14.     //在画布的上细纹c中，以左下角的店(x,y)和边长len，绘制一个n级别的科赫雪花分型
  15.     function snowflake(c,n,x,y,len){
  16.         c.save(); //保存当前变换
  17.         c.translate(x,y); //变换原点为起点
  18.         c.moveTo(0,0); //从新的原点喀什一条新的子路径
  19.         leg(n); //绘制雪花的第一条便
  20.         c.rotate(-120*deg); //现在沿着逆时针方向旋转120°
  21.         leg(n); //绘制第二条边
  22.         c.rotate(-120*deg); //再次旋转
  23.         leg(n); //画最后一条边
  24.         c.closePath(); //闭合子路径
  25.         c.restore(); //恢复初始的变换
  26.  
  27.         function leg(n){
  28.             c.save();
  29.             if(n===0){
  30.                 c.lineTo(len,0);
  31.             }else{
  32.                 c.scale(1/3,1/3);
  33.                 leg(n-1);
  34.                 c.rotate(60*deg);
  35.                 leg(n-1);
  36.                 c.rotate(-120*deg);
  37.                 leg(n-1);
  38.                 c.rotate(60*deg);
  39.                 leg(n-1);
  40.             }
  41.             c.restore();
  42.             c.translate(len,0);
  43.         }
  44.     }
  45.  
  46.     snowflake(c,0,5,115,125);
  47.     snowflake(c,1,145,115,125);
  48.     snowflake(c,2,285,115,125);
  49.     snowflake(c,3,425,115,125);
  50.     snowflake(c,4,565,115,125);
  51.     c.stroke();
  52. </script>
  53. </body>
  54. </html>

还有阴影的属性shadowBlur，shadowColor，shadowOffsetX，shadowOffsetY和线条的属性lineCap，lineDashOffset，lineJoin，lineWidth等，可以点击这里：快点我！

Canvas HTML5的更多相关文章

  1. 看逐浪CMS技术小哥做SVG动画（附使用Bodymovin和Lottie将Adobe After Effects(AE)程式转为 HTML5/Android/iOS原生的动画全过程-即AE转svg\canvas\html5动画）

      名词解解释 adobe After Effects AE:adobe After Effects,adobe公司的专业视频制作软件. Bodymovin插件预览 Bodymovin:是一个AE的插 ...

  2. HTML5 – 4.canvas

    1.绘制矩形 2.绘制圆形 3.绘制文字 4.保存文件 什么是 Canvas? HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. < ...

  3. HTML5 的绘图支持- canvas

    Canvas HTML5新增了一个canvas元素,它是一张空画布,开发者需要通过JavaScript脚本进行绘制. 在canvas上绘图,经过如下3步 (1) 获取canvas元素对应的DOM对象. ...

  4. HTML5 canvas入门

    HTML5 Canvas入门 <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形.在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字. ...

  5. HTML5 Canvas | w3cschool菜鸟教程

    HTML5 Canvas <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形.. 在画布上(Canvas)画一个红色矩形,梯度矩形,彩色矩形,和一些彩色的文字. ...

  6. HTML5 Canvas、内联 SVG、Canvas vs. SVG

    canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canv ...

  7. HTML5 新元素、HTML5 Canvas

    HTML5 新元素 自1999年以后HTML 4.01 已经改变了很多,今天,在HTML 4.01中的几个已经被废弃,这些元素在HTML5中已经被删除或重新定义. 为了更好地处理今天的互联网应用,HT ...

  8. HTML5中的Canvas详解

    什么是Canvas HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器,您必须使用脚本来绘制图 ...

  9. HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系

    一.前面的所以然 技术的发展日新月异,说不定回家钓几天鱼,就出来个新东西了.新事物新技术发展的初期,你无法预见其未来之趋势,生命诚可贵,没有必要花过多时间深入研究这些新东西,不过,知道了大概,了解个全 ...

随机推荐

  1. DELPHI 10.2(TOKYO) FOR LINUX的兼容性说明

    DELPHI 10.2(TOKYO) FOR LINUX的兼容性说明 自DELPHI 10.2(TOKYO) 始开始支持Linux . Delphi Linux 编译器 64 位 Linux 平台支持 ...

  2. DICOM医学图像处理：深入剖析Orthanc的SQLite，了解WADO & RESTful API

    背景: 上一篇博文简单翻译了Orthanc官网给出的CodeProject上“利用Orthanc Plugin SDK开发WADO插件”的博文,其中提到了Orthanc从0.8.0版本之后支持快速查询 ...

  3. spring 拦截器拦截点的配置

    实用正则org.springframework.aop.support.RegexpMethodPointcutAdvisor 然后 <property name="advice&qu ...

  4. Jstl indexOf 参考

    <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %> < ...

  5. Android最佳实践之Material Design

    Material概述及主题 学习地址:http://developer.android.com/training/material/get-started.html 使用material design ...

  6. Android Studio Ndk 编程

    如今开发Android程序基本都已经从Eclipse转到了Android Studio了, 近期项目需求, 须要用到ndk编程, 于是就折腾了一下. 开发环境 Android Studio 1.5.1 ...

  7. python（12）- 文件处理应用Ⅰ

    一.读取文件,打印第三行时后面加入“徐亚平” 程序如下: count=0 with open("test",mode="r",encoding="ut ...

  8. 手把手教你将本地项目文件上传至github

    相信大家都听过Git(分布式版本号控制系统)和github吧.没听过也没关系(Google一下),反正以后要去公司肯定会听过. 我是在今年年初才接触Git.之后就一发不可收拾.仅仅要有比較好的项目就G ...

  9. Linux中du和df

    Linux运维过程中,常常发现du和df返回值不一样,偶尔会发现区别非常大. 特定情况下,可能df看到磁盘已满,可是du推断磁盘剩余空间非常大. 文件系统分配当中的一些磁盘块用来记录它自身的一些数据. ...

  10. MVC3-表单

    [.NET Core已取消]Html.BeginForm() 该方法用于构建一个From表单的开始,他的构造方法为:Html.BeginForm("ActionName", &qu ...