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绘制clock

4994
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3595
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.4K7
来自专栏张善友的专栏

.NET 4 System.Threading.Barrier 类

在Visual Studio 2010 and .NET Framework 4 Training Kit中有个System.Threading.Barrier...

2119
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

8338
来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

37910
来自专栏芋道源码1024

熔断器 Hystrix 源码解析 —— 断路器 HystrixCircuitBreaker

本文主要基于 Hystrix 1.5.X 版本 1. 概述 2. HystrixCircuitBreaker 3. HystrixCircuitBreaker....

5657
来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

2997
来自专栏一个爱瞎折腾的程序猿

sqlserver使用存储过程跟踪SQL

USE [master] GO /****** Object: StoredProcedure [dbo].[sp_perfworkload_trace_s...

2810
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2886

扫码关注云+社区