专栏首页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基本属性操作实例

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>HTML5学堂</title>
 <link rel="stylesheet" href="../css/reset.css">
 <script src="../js/jquery-1.8.3.min.js" charset="utf-8" type="text/javascript"></script>
 <style>
  .wrap {
   width: 600px;
   height: 300px;
   margin: 0 auto;   
  }
  .wrap canvas {
   border: 1px solid #999;
  }
 </style>
</head>
<body>
 <div class="wrap">
  <canvas width="600" height="300">
   您的浏览器不支持canvas!
  </canvas> 
 </div>
 <script>
  var testCanvas = $("canvas")[0];
  var context = testCanvas.getContext("2d");
  context.beginPath();
  // 线条宽度
  context.lineWidth = "3";
  // 填充样式
  context.strokeStyle = "red";
  context.moveTo(50, 50);
  context.lineTo(50, 250);
  context.lineTo(150, 250);
  context.lineTo(150, 50);
  context.lineTo(50, 50);  
  context.closePath();
  // 闭合在实现绘制 该图像左上角出现不重合线性
  context.stroke();
  // 中间那条线
  context.beginPath();
  context.strokeStyle = "green";
  context.moveTo(50, 150);
  context.lineTo(150, 150);
  context.stroke();
  context.closePath();
 
  // 右边的矩形
  context.beginPath();
  context.strokeStyle = "blue";
  context.fillStyle = "skyblue";
  context.moveTo(300, 50);
  context.lineTo(300, 250);
  context.lineTo(550, 250);
  context.lineTo(550, 50);
  context.lineTo(300, 50);
  context.fill();
  context.closePath();
 
  var txt = "HTML5学堂";
  context.textAlign = "start";
  context. textBaseline = "middle";
  context.font = "30px Microsoft YaHei";
  context.fillText(txt, 224, 100);
  context.strokeText(txt, 224, 200);
 
  context.beginPath();
  // 线条宽度
  context.lineWidth = "10";
  // 设置线条末端线帽的样式
  context.lineCap = "round";
  // 作参考线
  context.moveTo(224, 50);
  context.lineTo(224, 250);
  context.moveTo(160, 100);
  context.lineTo(290, 100);
  context.stroke();
 </script>
</body>
</html>

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快速绘制实例

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>HTML5学堂</title>
 <link rel="stylesheet" href="../css/reset.css">
 <script src="../js/jquery-1.8.3.min.js" charset="utf-8" type="text/javascript"></script>
 <style>
  .draw {
   border: 1px solid red;
  }
 </style>
</head>
<body>
 <canvas id="testCanvas" width="1000" height="500" class="draw"></canvas>
 <script>
  var testCanvas = document.getElementById("testCanvas");
  // 获取getContext()对象
  var context = testCanvas.getContext("2d");
 
  // 开始路径
  context.beginPath();
  // 设置填充样式
  context.fillStyle = "yellow";
  // 设置描边样式
  context.strokeStyle = "green";
  // 线条宽度
  context.lineWidth = "5";
 
  // 矩形路径的绘制,但是不填充
  context.rect(10, 10, 200, 200)
 
  // 绘制路径
  context.stroke();
  // 填充路径
  // context.fill();
  // 关闭路径
  context.closePath();
 
  context.beginPath();
  context.fillStyle = "blue";
  // 矩形路径的填充
  context.fillRect(220, 10, 200, 200);
  context.closePath();
 
  context.beginPath();
  context.fillStyle = "blue";
  // 圆形路径的绘制
  context.arc(500, 250, 200, 0, Math.PI / 2, false);
  context.stroke();
  context.fill();
  context.closePath();
 
  context.beginPath();
  context.strokeStyle = "#fcf";
  // 矩形路径的填充
  context.moveTo(500, 250);
  context.quadraticCurveTo(20, 100, 100, 20)
  context.stroke();
  context.closePath();
 
  context.beginPath();
  context.strokeStyle = "#000";
  // 矩形路径的填充
  context.moveTo(500, 250);
  context.bezierCurveTo(500, 100, 40, 80, 500, 200)
  context.stroke();
  context.closePath();
 </script>
</body>
</html>

Canvas绘制思路

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

Canvas效果补充:棋盘绘制

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>HTML5学堂</title>
 <link rel="stylesheet" href="../css/reset.css">
 <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
</head>
<body>
 <div class="wrap">  
  <canvas width="1200" height="600">
   您的浏览器不支持canvas!
  </canvas> 
 </div>
 <script>
  var testCanvas = $("canvas")[0];
  var context = testCanvas.getContext("2d");
 
  context.beginPath();
  context.lineWidth = 2;
  context.strokeStyle = "pink";
  for (var i = 0; i < 26; i++) {
   context.moveTo(0, i * 20);
   context.lineTo(500, i * 20);
  };
  context.stroke();
  context.beginPath();
  context.strokeStyle = "skyblue";
  for (var j = 0; j < 26; j++) {
   context.moveTo(j * 20, 0);
   context.lineTo(j * 20, 500);
  };
  context.font = "60px Microsoft YaHei";
  context.strokeText("HTML5学堂-棋盘", 550, 250);
  context.strokeText("梦幻雪冰、独行冰海", 550, 360);
  context.stroke();
  context.closePath();
 </script>
</body>
</html>

效果图如下:

本文分享自微信公众号 - HTML5学堂(h5course-com),作者:HTML5学堂

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-08-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Canvas 动画制作

    在前面的两篇文章Canvas 基本绘制(下)、Canvas 基本绘制(上)中,介绍了Canvas的基本绘制。学过SVG的童鞋应该知道它是可以制作动画,那么Can...

    HTML5学堂
  • 一步步教你弹性框架-下篇

    HTML5学堂:本文继续为大家讲解弹性框架,在前两篇文章当中,我们从最基本的来回运动,讲解到缓冲运动、有摩擦力的运动。基本实现了弹性动画效果。今天我们主要来进行...

    HTML5学堂
  • 面向对象系列讲解—面向对象的含义&工厂模式

    HTML5学堂:在上一篇文章当中,我们把对象进行了基本的解释,本文当中,我将为大家解释什么是面向对象?为何要使用面向对象,而不用面向过程,面向对象又有什么好处,...

    HTML5学堂
  • canvas荧光表源码分享

    Youngxj
  • HTML5之Canvas

    document.createElement("canvas").getContext("2d");

    疯狂的技术宅
  • canvas 实现自定义钟表

    参考博客:https://www.cnblogs.com/liugang-vip/p/3557983.html

    acoolgiser
  • HTML5动态时钟

    felix
  • Canvas绘图——2d表

    初学JavaScript,用Canvas画一个表。主要用到昨天学的间歇调用(setInterval)。 方法和属性介绍 context.beginPath()、...

    刘开心_1266679
  • 06. Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布(上)

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 点击原文,查看笔...

    逸鹏
  • Spring bean注解配置(1)—— @Component

    Spring自带的@Component注解及扩展@Repository、@Service、@Controller,如图:

    浩Coding

扫码关注云+社区

领取腾讯云代金券