天达云 科技型企业 | 亚太互联网络信息中心(APNIC)成员 | 注册免费体验
天达云首页 > 互联网学习教程 > 移动开发 > HTML5 Canvas 画图

HTML5 Canvas 画图
更新：HHH   时间：2023-1-7

 按照官方例子画了几个基本图形,算是对于HTML5 Canvas有所了解，但是感觉这里面数学知识太忘记了，虽然以前数学竞赛出身，但是好多年不用了，有所遗忘。

HTML5的canvas元素只是提供了一个画布，而实际的绘制工作由javascript来完成。

基本HTML不说了， 也就是搭一个架子，放一个<canvas>元素，然后首部引入一些javascript文件，这里面每一个js文件都是一个画图的例子.

  1. <!DOCTYPE html> 
  2. <head> 
  3. <meta charset="UTF-8"> 
  4. <title>HTML5 Canvas DEMO</title> 
  5. <script type="text/javascript" src="js/drawRect.js"></script> 
  6. <script type="text/javascript" src="js/drawPath.js"></script> 
  7. <script type="text/javascript" src="js/drawLine.js"></script> 
  8. <script type="text/javascript" src="js/drawLinearGradient.js"></script> 
  9. <script type="text/javascript" src="js/drawTransformShape.js"></script> 
  10. <script type="text/javascript" src="js/drawAll.js"></script> 
  11. </head> 
  12.  
  13. <body onload="drawAll('canvas')"></body> 
  14. <h3>canvas：放开你的梦想</h3> 
  15. <canvas id="canvas" width="400" height="300"/> 
  16. <br><br> 

例子1：绘制矩形

  1. /** 
  2.  *  This file is confidential by Charles.Wang 
  3.  *  Copyright belongs to Charles.wang 
  4.  *  You can make contact with Charles.Wang (charles_wang888@126.com) 
  5.  */ 
  6.   
  7.  //这段js代码用于画一个长方形 
  8.  //参数是传进来的画布canvas的id,表明这段代码画在哪里 
  9.  function drawRect(id){ 
  10.      
  11.     //取得canvas对象，也就是我们js代码要画的canvas对象 
  12.     var canvas=document.getElementById('canvas'); 
  13.     if (canvas==null) 
  14.         return false; 
  15.          
  16.     //从canvas取得图形上下文，这个图形上下文context封装了许多绘画方法，这是一个内置的html5对象 
  17.     var context=canvas.getContext('2d'); 
  18.     //设定好当前图形上下文的样式，夜就是当前使用颜色来绘制图形，此外还有一些其他的样式 
  19.     context.fillStyle="#0044FF"; 
  20.     //fillXXX用来填充图形的内部，这里fillRect，表明用当前颜色填充图形内部，4个参数分别为起点横坐标/起点纵坐标/宽度/高度 
  21.     context.fillRect(0,0,400,300); 
  22.     //颜色值既可以用十六进制命名，也可以使用颜色名 
  23.     context.fillStyle="red"; 
  24.     context.strokeStyle="blue"; 
  25.     //用于设置图形边框的宽度 
  26.     context.lineWidth=1; 
  27.     context.fillRect(50,50,100,100); 
  28.     //strokeXXX用来描述图形的边框(stroke),这里strokeRect，表明用来绘制刚才矩形的边框 
  29.     context.strokeRect(50,50,100,100); 
  30.  } 

画出来的结果是：

例子2：用Path来绘制一组圆形：

  1. /** 
  2.  *  This file is confidential by Charles.Wang 
  3.  *  Copyright belongs to Charles.wang 
  4.  *  You can make contact with Charles.Wang (charles_wang888@126.com) 
  5.  */ 
  6.   
  7.  function drawPath(id){ 
  8.      
  9.     var canvas=document.getElementById(id); 
  10.     if(canvas == null) 
  11.         return false; 
  12.      
  13.     //依旧先拿到canvas对象和上下文对象 
  14.     var context = canvas.getContext("2d"); 
  15.     //先绘制画布的底图 
  16.     context.fillStyle="#EEEEEF"; 
  17.     context.fillRect(0,0,400,300); 
  18.      
  19.     //用循环绘制10个圆形 
  20.     var n = 0; 
  21.     for(var i=0 ;i<10;i++){ 
  22.         //开始创建路径，因为要画圆，圆本质上也是一个路径，这里向canvas说明，我要开始画了，这是起点 
  23.         context.beginPath(); 
  24.         //画一个拱形(arcade)，因为圆是一种特殊的拱形 
  25.         //6个参数分别是 起点横坐标，起点纵坐标，圆的半径，起始弧度，结束弧度（2PI刚好是360度），是否顺时针 
  26.         context.arc(i*25,i*25,i*10,0,Math.PI*2,true); 
  27.         //关闭路径 
  28.         context.closePath(); 
  29.         context.fillStyle="rgba(255,0,0,0.25)"; 
  30.         //填充刚才所画的圆形 
  31.         context.fill(); 
  32.     } 
  33.  } 

 画出来的结果是：

例子3：绘制直线，并且用直线组合复杂图形

  1. /** 
  2.  *  This file is confidential by Charles.Wang 
  3.  *  Copyright belongs to Charles.wang 
  4.  *  You can make contact with Charles.Wang (charles_wang888@126.com) 
  5.  */ 
  6.   
  7.  function drawLine(id){ 
  8.      
  9.     var canvas=document.getElementById(id); 
  10.     if(canvas==null) 
  11.     return false; 
  12.     var context = canvas.getContext('2d'); 
  13.     context.fillStyle="#FF00FF"; 
  14.     context.fillRect(0,0,400,300); 
  15.      
  16.     var n=0; 
  17.     var dx=150; 
  18.     var dy=150; 
  19.     var s = 100; 
  20.     context.beginPath(); 
  21.     context.fillStyle='rgb(100,255,100)'; 
  22.     context.strokeStyle='rgb(0,0,100)'; 
  23.     var x = Math.sin(0); 
  24.     var y = Math.cos(0); 
  25.     var dig=Math.PI/15*11; 
  26.     for(var i = 0;i<30;i++){ 
  27.         var x = Math.sin(i*dig); 
  28.         var y = Math.cos(i*dig); 
  29.         //用三角函数计算顶点 
  30.         context.lineTo(dx+x*s,dy+y*s); 
  31.     } 
  32.     context.closePath(); 
  33.     context.fill(); 
  34.     context.stroke(); 
  35.  } 

画出来的结果是：

例子4：使用线性渐变

  1. /** 
  2.  *  This file is confidential by Charles.Wang 
  3.  *  Copyright belongs to Charles.wang 
  4.  *  You can make contact with Charles.Wang (charles_wang888@126.com) 
  5.  */ 
  6.   
  7.  //渐变用于填充，是指填充图形时从某种颜色慢慢过渡到另外一种颜色 
  8.  //线性渐变是指在一个线段之间进行渐变，线段上每个点随着离开起点的位移值的变化，其颜色也在变化 
  9. function drawLinearGradient(id){ 
  10.      
  11.     var canvas = document.getElementById(id); 
  12.     if(canvas==null) 
  13.     return false; 
  14.      
  15.     //我们还是先绘制底图，这次，我们的底图也用了渐变 
  16.     var context = canvas.getContext('2d'); 
  17.     //第一个渐变，用于底图，它调用了createlinearGradient创建了一个渐变 
  18.     //4个参数分别为起点的横坐标,起点的纵坐标，结束点的横坐标，结束点的纵坐标，所以本例就是从(0,0)到(0,300)，所以是一个竖直向下的渐变 
  19.     var gradient1=context.createLinearGradient(0,0,0,300); 
  20.     //addColorStop可以设置渐变的颜色，第一个参数表示偏移量（0-1）之间，第二个参数表示颜色 
  21.     //所以，我们定义了从×××到蓝色的渐变 
  22.     gradient1.addColorStop(0,'rgb(255,255,0)'); 
  23.     gradient1.addColorStop(1,'rgb(0,255,255)'); 
  24.     //将上下文对象关联到当前的渐变设定作为填充风格 
  25.     context.fillStyle=gradient1; 
  26.     //用我们定义的渐变来绘制底图 
  27.     context.fillRect(0,0,400,300); 
  28.      
  29.     var n = 0; 
  30.     //这次我们要画一组圆圈，我们定义一个从(0,0)到(300,0)也就是水平方向从左到右的渐变 
  31.     var gradient2=context.createLinearGradient(0,0,300,0); 
  32.     //设置渐变色的起始颜色和终止颜色 
  33.     gradient2.addColorStop(0,'rgba(0,0,255,0.5'); 
  34.     gradient2.addColorStop(1,'rgba(255,0,0,0.5)'); 
  35.     //用循环画圆，并且用渐变色填充 
  36.     for(var i=0;i<10;i++){ 
  37.         context.beginPath(); 
  38.         context.fillStyle=gradient2; 
  39.         context.arc(i*25,i*25,i*10,0,Math.PI*2,true); 
  40.         context.closePath(); 
  41.         context.fill(); 
  42.     } 
  43. } 

画出来的结果是：

例子5：图形基本变换（平移，缩放，旋转）

  1. /** 
  2.  *  This file is confidential by Charles.Wang 
  3.  *  Copyright belongs to Charles.wang 
  4.  *  You can make contact with Charles.Wang (charles_wang888@126.com) 
  5.  */ 
  6.   
  7.   
  8.  //这个函数用于演示一些常用的坐标变换 
  9.  //常见的坐标变换有平移，缩放，旋转 
  10.  function drawTransformShape(id){ 
  11.      
  12.     var canvas = document.getElementById(id); 
  13.     if(canvas == null)  
  14.         return false; 
  15.     //画底图 
  16.     var context = canvas.getContext('2d'); 
  17.     context.fillStyle="#FF00FF"; 
  18.     context.fillRect(0,0,400,300); 
  19.      
  20.     //移动坐标轴的原点，因为这里向右边平移了200，向下移动了50，所以水平方向是居中了 
  21.     context.translate(200,50); 
  22.      
  23.     //循环可以画一系列的五角星 
  24.     for(var i=0;i<50;i++){ 
  25.         //每次坐标轴的原点往右下各移动25像素 
  26.         context.translate(25,25); 
  27.         //并且每次进行缩放到0.95倍 
  28.         context.scale(0.95,0.95); 
  29.         //然后把这个图形进行旋转，每次转动+18度（也就是顺时针） 
  30.         context.rotate(Math.PI/10); 
  31.         //然后在当前位置画一个五角星 
  32.         create5star(context); 
  33.         //并且填充当前五角星 
  34.         context.fill(); 
  35.     } 
  36.      
  37.  } 
  38.   
  39.   
  40.  //这个函数用于绘制一个五角星 
  41.  function create5star(context){ 
  42.     var n = 0; 
  43.     var dx = 100; 
  44.     var dy = 0 ; 
  45.     var s = 50; 
  46.     //创建路径 
  47.     context.beginPath(); 
  48.     context.fillStyle="rgba(255,0,0,0.5)"; 
  49.     var x = Math.sin(0); 
  50.     var y= Math.cos(0); 
  51.     var dig = Math.PI/5 *4; 
  52.     //画五角星的五条边 
  53.     for(var i = 0;i<5;i++){ 
  54.         var x = Math.sin(i*dig); 
  55.         var y = Math.cos(i*dig); 
  56.         context.lineTo(dx+x*s,dy+y*s); 
  57.     } 
  58.     context.closePath(); 
  59.  } 
  60.   
  61.   

画出来的结果是：

 
返回移动开发教程...
400-837-6568
7 * 24小时全天全国服务热线400电话
天达云·专业的云计算服务平台 全国400服务电话：400-837-6568
Copyright © 2011-2025 Tdyun.com. All Rights Reserved. 天达云 版权所有 粤ICP备18083267号-7