HTML5学堂-码匠 HTML5学堂

您当前位于:HTML5高级知识 ——> Canvas 图像绘制的基本方法(下)

Canvas 图像绘制的基本方法(下)

2015/07/21 23:30:03 | 作者:HTML5学堂(码匠) | 分类:HTML5高级知识 | 关键词:Canvas,绘制图像,路径,贝塞尔曲线

Canvas 基本绘制(下)

HTML5学堂:在前一篇文章《Canvas 基本绘制(上)》当中,我们为大家介绍了Canvas的基本知识——什么是Canvas、如何使用Canvas进行图像的绘制、Canvas的一些基本方法。在今天的这篇文章当中,我们将为大家介绍Canvas的基本属性、快速路径的绘制方法等。

Canvas基本属性

设置填充与描边颜色

strokeStyle、fillStyle

线条样式的设置

lineCap:设置线条末端线帽的样式 (round、square)

注释:"round" 和 "square" 会使线条略微变长,两端变长的长度各为宽度的一半。

lineWidth:不需要写单位,以像素计

字体设置

font:同 CSS font-family 属性

textAlign:文字水平对齐方式。可取属性值: start, end, left,right, center。默认值:start。

textBaseline:文字竖直对齐方式。可取属性值: top, hanging(文本基线是悬挂基线), middle,alphabetic(文本基线是普通的字母基线), ideographic(文本基线是表意基线), bottom 。默认值:alphabetic。

Canvas基本属性操作实例

  1. <!doctype html>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>HTML5学堂</title>
  6.  <link rel="stylesheet" href="../css/reset.css">
  7.  <script src="../js/jquery-1.8.3.min.js" charset="utf-8" type="text/javascript"></script>
  8.  <style>
  9.   .wrap {
  10.    width: 600px;
  11.    height: 300px;
  12.    margin: 0 auto;   
  13.   }
  14.   .wrap canvas {
  15.    border: 1px solid #999;
  16.   }
  17.  </style>
  18. </head>
  19. <body>
  20.  <div class="wrap">
  21.   <canvas width="600" height="300">
  22.    您的浏览器不支持canvas!
  23.   </canvas> 
  24.  </div>
  25.  <script>
  26.   var testCanvas = $("canvas")[0];
  27.   var context = testCanvas.getContext("2d");
  28.   context.beginPath();
  29.   // 线条宽度
  30.   context.lineWidth = "3";
  31.   // 填充样式
  32.   context.strokeStyle = "red";
  33.   context.moveTo(50, 50);
  34.   context.lineTo(50, 250);
  35.   context.lineTo(150, 250);
  36.   context.lineTo(150, 50);
  37.   context.lineTo(50, 50);  
  38.   context.closePath();
  39.   // 闭合在实现绘制 该图像左上角出现不重合线性
  40.   context.stroke();
  41.   // 中间那条线
  42.   context.beginPath();
  43.   context.strokeStyle = "green";
  44.   context.moveTo(50, 150);
  45.   context.lineTo(150, 150);
  46.   context.stroke();
  47.   context.closePath();
  48.  
  49.   // 右边的矩形
  50.   context.beginPath();
  51.   context.strokeStyle = "blue";
  52.   context.fillStyle = "skyblue";
  53.   context.moveTo(300, 50);
  54.   context.lineTo(300, 250);
  55.   context.lineTo(550, 250);
  56.   context.lineTo(550, 50);
  57.   context.lineTo(300, 50);
  58.   context.fill();
  59.   context.closePath();
  60.  
  61.   var txt = "HTML5学堂";
  62.   context.textAlign = "start";
  63.   context. textBaseline = "middle";
  64.   context.font = "30px Microsoft YaHei";
  65.   context.fillText(txt, 224, 100);
  66.   context.strokeText(txt, 224, 200);
  67.  
  68.   context.beginPath();
  69.   // 线条宽度
  70.   context.lineWidth = "10";
  71.   // 设置线条末端线帽的样式
  72.   context.lineCap = "round";
  73.   // 作参考线
  74.   context.moveTo(224, 50);
  75.   context.lineTo(224, 250);
  76.   context.moveTo(160, 100);
  77.   context.lineTo(290, 100);
  78.   context.stroke();
  79.  </script>
  80. </body>
  81. </html>

Canvas基本属性

Canvas快速绘制

矩形路径的绘制

rect(x,y,w,h):x、y为起始坐标,w、h为矩形的宽、高

fillRect(x,y,w,h):参数同上,与上面区别:上面只绘制、不填充,fillRect(x,y,w,h)填充

圆形路径的绘制

快速绘制-圆

arc(x,y,r,sa,ea,true/false):x、y为圆心坐标,r为半径,sa、ea分别为起始角度和结束角度(以弧度计),最后一个参数为true时,逆时针画圆,false则顺时针画圆;

贝塞尔曲线

贝塞尔曲线

quadraticCurveTo (kx,ky,ex,ey)

二次贝塞尔曲线开始点:moveTo(x, y);

kx、ky:控制点

ex、ey:结束点

bezierCurveTo (kx1,ky1,kx2,ky2,ex,ey) :三次贝塞尔曲线,两个控制点,一个终点

开始点:moveTo(x, y);

kx1、ky1:控制点

kx2、ky2:控制点

ex、ey:结束点

Canvas快速绘制实例

  1. <!doctype html>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>HTML5学堂</title>
  6.  <link rel="stylesheet" href="../css/reset.css">
  7.  <script src="../js/jquery-1.8.3.min.js" charset="utf-8" type="text/javascript"></script>
  8.  <style>
  9.   .draw {
  10.    border: 1px solid red;
  11.   }
  12.  </style>
  13. </head>
  14. <body>
  15.  <canvas id="testCanvas" width="1000" height="500" class="draw"></canvas>
  16.  <script>
  17.   var testCanvas = document.getElementById("testCanvas");
  18.   // 获取getContext()对象
  19.   var context = testCanvas.getContext("2d");
  20.  
  21.   // 开始路径
  22.   context.beginPath();
  23.   // 设置填充样式
  24.   context.fillStyle = "yellow";
  25.   // 设置描边样式
  26.   context.strokeStyle = "green";
  27.   // 线条宽度
  28.   context.lineWidth = "5";
  29.  
  30.   // 矩形路径的绘制,但是不填充
  31.   context.rect(10, 10, 200, 200)
  32.  
  33.   // 绘制路径
  34.   context.stroke();
  35.   // 填充路径
  36.   // context.fill();
  37.   // 关闭路径
  38.   context.closePath();
  39.  
  40.   context.beginPath();
  41.   context.fillStyle = "blue";
  42.   // 矩形路径的填充
  43.   context.fillRect(220, 10, 200, 200);
  44.   context.closePath();
  45.  
  46.   context.beginPath();
  47.   context.fillStyle = "blue";
  48.   // 圆形路径的绘制
  49.   context.arc(500, 250, 200, 0, Math.PI / 2, false);
  50.   context.stroke();
  51.   context.fill();
  52.   context.closePath();
  53.  
  54.   context.beginPath();
  55.   context.strokeStyle = "#fcf";
  56.   // 矩形路径的填充
  57.   context.moveTo(500, 250);
  58.   context.quadraticCurveTo(20, 100, 100, 20)
  59.   context.stroke();
  60.   context.closePath();
  61.  
  62.   context.beginPath();
  63.   context.strokeStyle = "#000";
  64.   // 矩形路径的填充
  65.   context.moveTo(500, 250);
  66.   context.bezierCurveTo(500, 100, 40, 80, 500, 200)
  67.   context.stroke();
  68.   context.closePath();
  69.  </script>
  70. </body>
  71. </html>

Canvas绘制思路

开启路径——>设置属性——>进行路径的变化——>关闭路径——>描边或填充

Canvas效果补充:棋盘绘制

  1. <!doctype html>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>HTML5学堂</title>
  6.  <link rel="stylesheet" href="../css/reset.css">
  7.  <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
  8. </head>
  9. <body>
  10.  <div class="wrap">  
  11.   <canvas width="1200" height="600">
  12.    您的浏览器不支持canvas!
  13.   </canvas> 
  14.  </div>
  15.  <script>
  16.   var testCanvas = $("canvas")[0];
  17.   var context = testCanvas.getContext("2d");
  18.  
  19.   context.beginPath();
  20.   context.lineWidth = 2;
  21.   context.strokeStyle = "pink";
  22.   for (var i = 0; i < 26; i++) {
  23.    context.moveTo(0, i * 20);
  24.    context.lineTo(500, i * 20);
  25.   };
  26.   context.stroke();
  27.   context.beginPath();
  28.   context.strokeStyle = "skyblue";
  29.   for (var j = 0; j < 26; j++) {
  30.    context.moveTo(j * 20, 0);
  31.    context.lineTo(j * 20, 500);
  32.   };
  33.   context.font = "60px Microsoft YaHei";
  34.   context.strokeText("HTML5学堂-棋盘", 550, 250);
  35.   context.strokeText("梦幻雪冰、独行冰海", 550, 360);
  36.   context.stroke();
  37.   context.closePath();
  38.  </script>
  39. </body>
  40. </html>

Canvas效果 - 棋盘绘制

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS