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 条评论
登录 后参与评论

相关文章

来自专栏前端知识分享

第154天:canvas基础(一)

​ <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(...

552
来自专栏逸鹏说道

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

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

3237
来自专栏十月梦想

canvas封闭状态及状态恢复

使用context.save()会保存当前的线条颜色,宽度属性,进行多次保存,使用context.restore()恢复离之最近之前的状态,

762
来自专栏GIS讲堂

Openlayers4中风场的实现

[lat, lon, wd, ws],其中:lat为纬度;lon为经度;wd为风向;ws为风速。

441
来自专栏ml

学习HTML5之塔克大战(详细记录)

          学了一些HTML5的一些基本知识,开始学习制作......           介绍一些基本知识:  px(像素)---》1px等于多少? ...

2957
来自专栏IMWeb前端团队

在物理引擎中画圆弧

本文作者:IMWeb zzbozheng 原文出处:IMWeb社区 未经同意,禁止转载 因为需求的需要,要使用在物理引擎中使用四分之一圆弧,我们来看看...

1968
来自专栏程序员的诗和远方

Canvas画图基础

画矩形 Canvas画矩形还是比较方便的,可以用fillrect,clearrect,strokerect,rect几种方法,各自间有点区别,先上代码: // ...

2025
来自专栏IMWeb前端团队

Canvas实现progress效果

据说本贵族圈每月不分享就邀请雪糕。。。所以分享下一个简单的Canvas插件   Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像,你可以使用j...

1787
来自专栏前端儿

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

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

1241
来自专栏前端黑板报

canvas-画线

坐标系统简析 ? 左边是笛卡尔坐标系,右边是canvas坐标系。 笛卡尔坐标系(Cartesian coordinate system): 也称直角坐标系,是一...

2109

扫码关注云+社区