首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript实现使用Canvas绘制图形的基本教程

Posted in Javascript onOctober 27, 2016

由于这两年HTML5火的正热，所以研究了一下，最近有个想法也是要用到HTML的相关功能，所以也要好好学习一把。

好好看了一下Canvas的功能，感觉HTML5在客户端交互的功能性越来越强了，今天看了一下Canvas绘图，下边是几个实例，记下以备后用。

1、使用Canvas绘制直线：

JavaScript实现使用Canvas绘制图形的基本教程

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <style type="text/css">
    canvas{border:dashed 2px #CCC}
  </style>
  <script type="text/javascript">
    function $$(id){
      return document.getElementById(id);
    }
    function pageLoad(){
      var can = $$('can');
      var cans = can.getContext('2d');
      cans.moveTo(20,30);//第一个起点
      cans.lineTo(120,90);//第二个点
      cans.lineTo(220,60);//第三个点（以第二个点为起点）
      cans.lineWidth=3;
      cans.strokeStyle = 'red';
      cans.stroke();
    }
  </script>
  <body onload="pageLoad();">
    <canvas id="can" width="400px" height="300px">4</canvas>
  </body>
</html>

这里用到的两个API方法，moveTo和lineTo分别是线段的起点和终点坐标，变量为（X坐标,Y坐标）,strokeStyle、stroke分别路径绘制样式和绘制路径。

2、绘制渐变线条

JavaScript实现使用Canvas绘制图形的基本教程

渐变线条就是颜色有渐变的效果，当然渐变的样式可以遵循路径的方向也可以不遵循路径的方向：

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <style type="text/css">
    canvas{border:dashed 2px #CCC}
  </style>
  <script type="text/javascript">
    function $$(id){
      return document.getElementById(id);
    }
    function pageLoad(){
      var can = $$('can');
      var cans = can.getContext('2d');
      cans.moveTo(0,0);
      cans.lineTo(400,300);
      var gnt1 = cans.createLinearGradient(0,0,400,300);//线性渐变的起止坐标
      gnt1.addColorStop(0,'red');//创建渐变的开始颜色，0表示偏移量，个人理解为直线上的相对位置，最大为1，一个渐变中可以写任意个渐变颜色
      gnt1.addColorStop(1,'yellow');
      cans.lineWidth=3;
      cans.strokeStyle = gnt1;
      cans.stroke();
    }
  </script>
  <body onload="pageLoad();">
    <canvas id="can" width="400px" height="300px">4</canvas>
  </body>
</html>

3、绘制矩形或正方形：

JavaScript实现使用Canvas绘制图形的基本教程

这种矩形框如果使用HTML4只能使用后台代码才能生成了，现在HTML5提供的Canvas功能却很容易就能绘制，所以说HTML5的优越性是相当高的。

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <style type="text/css">
    canvas{border:dashed 2px #CCC}
  </style>
  <script type="text/javascript">
    function $$(id){
      return document.getElementById(id);
    }
    function pageLoad(){
      var can = $$('can');
      var cans = can.getContext('2d');
      cans.fillStyle = 'yellow';
      cans.fillRect(30,30,340,240);
    }
  </script>
  <body onload="pageLoad();">
    <canvas id="can" width="400px" height="300px">4</canvas>
  </body>
</html>

这里使用了一个方法——fillRect（）从字面意思也能知道这个就是填充一个矩形，这里的参数值得说明一下fillRect(X,Y,Width,Height)，这个和数学里的坐标是不一样的，具体请看

JavaScript实现使用Canvas绘制图形的基本教程

这里的X，Y是相对Canvas左上角的起点开始的，谨记！！

4、绘制一个简单的矩形框

上例中讲到要绘制一个矩形块，填充了颜色，这个例子只是简单地绘制一个矩形而不实现填充效果。

JavaScript实现使用Canvas绘制图形的基本教程

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <style type="text/css">
    canvas{border:dashed 2px #CCC}
  </style>
  <script type="text/javascript">
    function $$(id){
      return document.getElementById(id);
    }
    function pageLoad(){
      var can = $$('can');
      var cans = can.getContext('2d');
      cans.strokeStyle = 'red';
      cans.strokeRect(30,30,340,240);
    }
  </script>
  <body onload="pageLoad();">
    <canvas id="can" width="400px" height="300px">4</canvas>
  </body>
</html>

这个很简单，和上例一样，就是将fill替换成了stroke，具体详见上例。

5、绘制一个线性渐变的矩形

渐变是填充的一种相当不错的效果，结合实例2和实例3，我们可以创建一个渐变的矩形

JavaScript实现使用Canvas绘制图形的基本教程

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <style type="text/css">
    canvas{border:dashed 2px #CCC}
  </style>
  <script type="text/javascript">
    function $$(id){
      return document.getElementById(id);
    }
    function pageLoad(){
      var can = $$('can');
      var cans = can.getContext('2d');
      var gnt1 = cans.createLinearGradient(10,0,390,0);
      gnt1.addColorStop(0,'red');
      gnt1.addColorStop(0.5,'green');
      gnt1.addColorStop(1,'blue');
      cans.fillStyle = gnt1;
      cans.fillRect(10,10,380,280);
    }
  </script>
  <body onload="pageLoad();">
    <canvas id="can" width="400px" height="300px">4</canvas>
  </body>
</html>

不解释了，记住fillRect（X,Y,Width,Height）就行了。

6、填充一个圆形

圆形的用途很广，当然也包含了椭圆。

JavaScript实现使用Canvas绘制图形的基本教程

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <style type="text/css">
    canvas{border:dashed 2px #CCC}
  </style>
  <script type="text/javascript">
    function $$(id){
      return document.getElementById(id);
    }
    function pageLoad(){
      var can = $$('can');
      var cans = can.getContext('2d');
      cans.beginPath();
      cans.arc(200,150,100,0,Math.PI*2,true);
      cans.closePath();
      cans.fillStyle = 'green';//本来这里最初使用的是red，截图一看，傻眼了，怕上街被爱国者打啊，其实你懂的~~
      cans.fill();
    }
  </script>
  <body onload="pageLoad();">
    <canvas id="can" width="400px" height="300px">4</canvas>
  </body>
</html>

这里的arc方法的用法是 arc(X,Y,Radius,startAngle,endAngle,anticlockwise),意思是（圆心X坐标，圆心Y坐标，半径，开始角度（弧度），结束角度弧度，是否按照顺时针画）；

arc中各参数比较：

a、cans.arc(200,150,100,0,Math.PI,true);
JavaScript实现使用Canvas绘制图形的基本教程

c、cans.arc(200,150,100,0,Math.PI/2,true);[/code]

JavaScript实现使用Canvas绘制图形的基本教程

c、cans.arc(200,150,100,0,Math.PI/2,true);

JavaScript实现使用Canvas绘制图形的基本教程

d、cans.arc(200,150,100,0,Math.PI/2,false);

JavaScript实现使用Canvas绘制图形的基本教程

7、圆形区块

JavaScript实现使用Canvas绘制图形的基本教程

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <style type="text/css">
    canvas{border:dashed 2px #CCC}
  </style>
  <script type="text/javascript">
    function $$(id){
      return document.getElementById(id);
    }
    function pageLoad(){
      var can = $$('can');
      var cans = can.getContext('2d');
      cans.beginPath();
      cans.arc(200,150,100,0,Math.PI*2,false);
      cans.closePath();
      cans.lineWidth = 5;
      cans.strokeStyle = 'red';
      cans.stroke();
    }
  </script>
  <body onload="pageLoad();">
    <canvas id="can" width="400px" height="300px">4</canvas>
  </body>
</html>

这里不解释了，和上边的例子相同，lineWidth是控制线条的宽度的。

8、圆形渐变

JavaScript实现使用Canvas绘制图形的基本教程

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <style type="text/css">
    canvas{border:dashed 2px #CCC}
  </style>
  <script type="text/javascript">
    function $$(id){
      return document.getElementById(id);
    }
    function pageLoad(){
      var can = $$('can');
      var cans = can.getContext('2d');
      var gnt = cans.createRadialGradient(200,300,50,200,200,200);
      gnt.addColorStop(1,'red');
      gnt.addColorStop(0,'green');
      cans.fillStyle = gnt;
      cans.fillRect(0,0,800,600);
    }
  </script>
  <body onload="pageLoad();">
    <canvas id="can" width="800px" height="600px">4</canvas>
  </body>
</html>

JavaScript实现使用Canvas绘制图形的基本教程

这里需要说明的是createRadialGradient方法，参数有（Xstart,Ystart,radiusStart,XEnd,YEnd,radiusEnd），也就是说，它在实行渐变时，使用了两个圆，一个是原始的圆，一个是渐变式圆，其实，这种通过坐标与半径控制的方式可以实现很多样式，比如

立体圆

JavaScript实现使用Canvas绘制图形的基本教程

var gnt = cans.createRadialGradient(200,150,0,200,50,250);
gnt.addColorStop(0,'red');
gnt.addColorStop(1,'#333');

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

JavaScript实现使用Canvas绘制图形的基本教程

- Author -

小伍

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js几个不错的函数 $$()
Oct 09 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
JS设置cookie、读取cookie
Feb 24 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 Javascript
JavaScript创建对象的七种方式全面总结
Aug 21 Javascript
详解angular2.x创建项目入门指令
Oct 11 Javascript
在Create React App中启用Sass和Less的方法示例
Jan 16 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 #Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 #Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 #Javascript
简单理解vue中el、template、replace元素
Oct 27 #Javascript
深入理解JavaScript定时机制
Oct 27 #Javascript
解析javascript图片懒加载与预加载的分析总结
Oct 27 #Javascript
js实现加载更多功能实例
Oct 27 #Javascript
相对定位(1) mixin(1) ref(1) ECharts(3) props(1) 绝对定位(1) postcss-px2rem(1) 匹配(1) lua(3) geoserver(1)
You might like
PHP 验证码的实现代码
2011/07/17 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
php计算一个文件大小的方法
2015/03/30 PHP
PHP中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
php支付宝在线支付接口开发教程
2016/09/19 PHP
php基于环形链表解决约瑟夫环问题示例
2017/11/07 PHP
jQuery Tab插件 用于在Tab中显示iframe，附源码和详细说明
2011/06/27 Javascript
javascript全局变量封装模块实现代码
2012/11/28 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
JS实现的简单折叠展开动画效果示例
2018/04/28 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
ghd官网：英国ghd直发器品牌
2018/05/04 全球购物
平面设计的岗位职责
2013/11/08 职场文书
小松树教学反思
2014/02/11 职场文书
《珍珠泉》教学反思
2014/02/20 职场文书
2014年母亲节寄语
2014/05/07 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
服务员态度差检讨书
2014/10/28 职场文书
职工年度考核评语
2014/12/31 职场文书
领导欢送会主持词
2015/07/06 职场文书