首页
所有分类
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 相关文章推荐
javascript模拟map输出与去除重复项的方法
Feb 09 Javascript
JavaScript中property和attribute的区别详细介绍
Mar 03 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
深入浅析react native es6语法
Dec 09 Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 Javascript
Bootstrap按钮组简单实现代码
Mar 06 Javascript
vue绑定事件后获取绑定事件中的this方法
Sep 15 Javascript
node.js微信小程序配置消息推送的实现
Feb 13 Javascript
用JS实现一个简单的打砖块游戏
Dec 11 Javascript
vue动态设置页面title的方法实例
Aug 23 Javascript
element-ui 弹窗组件封装的步骤
Jan 22 Javascript
JavaScript 绘制饼图的示例
Feb 19 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
荷兰购物网站(99) 南非购物网站(8) 哥伦比亚购物网站(5) 阿联酋购物网站(26) 葡萄牙购物网站(13) 欧洲购物网站(15) 奥地利购物网站(28) 泰国购物网站(30) 土耳其购物网站(10) 波兰购物网站(52)
You might like
[FAQ]PHP中的一些常识：类篇
2006/10/09 PHP
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
一些mootools的学习资源
2010/02/07 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
JavaScript文本框脚本编写的注意事项
2016/01/25 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
微信小程序版本自动更新的方法
2019/06/14 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
js实现简单进度条效果
2020/03/25 Javascript
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
Python合并多个装饰器小技巧
2015/04/28 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
Python中装饰器学习总结
2018/02/10 Python
python dataframe astype 字段类型转换方法
2018/04/11 Python
如何用python整理附件
2018/05/13 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
基于python3的socket聊天编程
2020/02/17 Python
浅谈python锁与死锁问题
2020/08/14 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
纽约手袋品牌：KARA
2018/03/18 全球购物
工商学院毕业生个人自我评价
2013/09/19 职场文书
股权转让意向书
2014/04/01 职场文书
期末评语大全
2014/05/04 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL