HTML5 Canvas 画图

发布时间:2020-06-07 01:04:54 作者:charles_wang888
来源:网络 阅读:2005

 按照官方例子画了几个基本图形,算是对于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.  } 

画出来的结果是:

HTML5 Canvas 画图

例子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.  } 

 画出来的结果是:

HTML5 Canvas 画图

例子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.  } 

画出来的结果是:

HTML5 Canvas 画图

例子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.     } 

画出来的结果是:

HTML5 Canvas 画图

例子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.   

画出来的结果是:

HTML5 Canvas 画图

 

推荐阅读:
  1. html5实现画图
  2. Html5 画图

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

canvas html5 画布

上一篇:深信服硬件测试

下一篇:什么是IT服务外包

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》