HTML5 Canvas 画图-阿里云开发者社区

开发者社区> 余二五> 正文

HTML5 Canvas 画图

简介:
+关注继续查看

 按照官方例子画了几个基本图形,算是对于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. <h2>canvas:放开你的梦想</h2> 
  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.     } 

画出来的结果是:

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

画出来的结果是:





本文转自 charles_wang888 51CTO博客,原文链接:http://blog.51cto.com/supercharles888/853611,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10086 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13891 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9161 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
7498 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4506 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
22404 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7365 0
+关注
20382
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载