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)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏十月梦想

canvas扇形图、饼状图绘制

上一篇说过使用arc属性绘制一个完整的圆,这是绘制扇形是不是可以刷一下小聪明吧弧度修改一下,你会发现绘制的扇形想西瓜皮一样,只有初始弧度到结束弧度的一个简单连接...

1401
来自专栏前端儿

Canvas 绘制矩形,圆形,不规则图形(线条),渐变等图像效果

getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

4211
来自专栏九彩拼盘的叨叨叨

SVG 直线路径写法示例

大写字母表示到后面值为绝对值,小写字母表示后面值为相对当前点的值 画一条起点是(10, 10)终点点是 (20, 30) 的线

904
来自专栏雪胖纸的玩蛇日常

canvas的api小结

2406
来自专栏Spring相关

使用canvas绘制渐变色矩形和使用按键控制人物移动

1083
来自专栏逸鹏说道

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

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

3627
来自专栏哈雷彗星撞地球

iOS下使状态栏颜色与H5中背景色一致

iOS 中有的页面也能会内嵌WebView,然后WebView中用H5做了一个导航,而iOS 中状态栏的颜色很难调整的与H5中导航颜色一致。如下图所示:

1454
来自专栏林德熙的博客

WPF 等距布局

实际做的效果很简单,因为在开发我容易就用到了等距的控件。等距控件就是在指定的宽度下,平均把控件放在水平的地方,这样相等于 StackPanel 的水平,但是没有...

721
来自专栏老马寒门IT

Html5 学习系列(五)Canvas绘图API快速入门(2)

Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来。接下里我会在本文中给各位介绍Canvas的...

2598
来自专栏jojo的技术小屋

原 canvas小案例集合(小画板、画的回

作者:汪娇娇 日期:2016.12.8 在现在这个公司呆了4个多月,也是研究了canvas将近4个月,前两周心里就痒痒的想写这方面的博客,但一直没时间。可一直拖...

5548

扫码关注云+社区