首页
所有分类
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 相关文章推荐
打开超链需要“确认”对话框的方法
Mar 08 Javascript
javascript一些实用技巧小结
Mar 18 Javascript
让AJAX不依赖后端接口实现方案
Dec 03 Javascript
js 自制滚动条的小例子
Mar 16 Javascript
js中arguments,caller,callee,apply的用法小结
Jan 28 Javascript
JavaScript模拟实现键盘打字效果
Jun 29 Javascript
jQuery的框架介绍
May 11 Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 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
OOP(1) tree shaking(1) GPU(1) HBuilder(1) 条形码(1) SeaTable(1) Three.js(1) kubernetes(1) 分布式追踪(1) MutationObserver(1)
You might like
MYSQL环境变量设置方法
2007/01/15 PHP
深入php多态的实现详解
2013/06/09 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
Laravel5.4框架使用socialite实现github登录的方法
2019/03/20 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
xmlplus组件设计系列之图标（ICON）(1）
2017/05/05 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
JS变量提升及函数提升实例解析
2020/09/03 Javascript
[00:31]DOTA2荣耀之路7：Miracle-空血无敌斩
2018/05/31 DOTA
Python读取键盘输入的2种方法
2015/06/16 Python
python数据类型_字符串常用操作(详解)
2017/05/30 Python
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
Python实现判断给定列表是否有重复元素的方法
2018/04/11 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
如何对python的字典进行排序
2020/06/19 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
四风个人对照检查材料思想汇报（办公室通用版）
2014/10/07 职场文书
交通事故案件代理词
2015/05/23 职场文书
工作汇报材料难写？方法都在这里了！
2019/07/01 职场文书
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android