简单图形绘制

矩形：描边与填充

Canvas的API提供了三个方法，分别用于矩形的清除、描边及填充

clearRect(double x, double y, double w, double h)

strokeRect(double x, double y, double w, double h)

fillRect(double x, double y, double w, double h)

看一下这三个方法的使用

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  5.   <meta charset="utf-8">
  6.   <title>TESTAPP</title>
  7.   <style>
  8.     * {
  9.       padding: 0;
  10.       margin: 0;
  11.     }
  12.     #canvas {
  13.       background: #ccc;
  14.       border: 1px solid #aaa;
  15.       border-radius: 8px;
  16.       display: block;
  17.       margin: 20px auto;
  18.     }
  19.   </style>
  20. </head>
  21. <body>
  22. <canvas id="canvas" width="600" height="400">
  23.   Canvas is not supported.
  24. </canvas>
  25. <script>
  26.  var cvs = document.getElementById('canvas');
  27.   ctx = cvs.getContext('2d');
  28.   ctx.lineJoin = 'round';
  29.   ctx.lineWidth = 30;
  30.   ctx.font = "24px Helvetica";
  31.   ctx.fillText("Click anywhere to erase", 175, 40);
  32.   ctx.strokeRect(75, 100, 200, 200);
  33.   ctx.fillRect(325, 100, 200, 200);
  34.   ctx.canvas.onmousedown = function(e) {
  35.     ctx.clearRect(0, 0, cvs.width, cvs.height);
  36.   };
  37. </script>
  38. </body>
  39. </html>

clearRect(double x, double y, double w, double h)

该方法将指定矩形与当前剪辑区域相交范围内的所有像素清除。

在默认情况下，剪辑区域的大小就是整个canvas，所以，如果你没有改动剪辑区域的话，那么在参数所指范围内的所有像素都会被清除。所谓“清除像素”，指的是将其颜色设置为全透明的黑色。这在实际效果上就等同域“擦除”erase或者“清除”clear了某个像素，从而使得canvas的背景可以透过像素显示出来。

strokeRect(double x, double y, double w, double h)

使用如下属性，为指定的矩形描边

strokeStyle lineWidth lineJoin miterLimit

fillRect(double x, double y, double w, double h)

使用fillStyle属性填充指定的矩形。

线段

Canvas绘图环境提供了两个可以用来创建线性路径的方法：moveTo() lineTo(),要使用线性路径（也就是线段）出现在canvas中，在创建路径之后还要调用stroke()方法。

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  5.   <meta charset="utf-8">
  6.   <title>TEST APP</title>
  7.   <style>
  8.     * {
  9.       padding: 0;
  10.       margin: 0;
  11.     }
  12.     #canvas {
  13.       background: #ccc;
  14.       border: 1px solid #aaa;
  15.       border-radius: 8px;
  16.       display: block;
  17.       margin: 20px auto;
  18.     }
  19.   </style>
  20. </head>
  21. <body>
  22. <canvas id="canvas" width="600" height="400">
  23.   Canvas is not supported.
  24. </canvas>
  25. <script>
  26.  var cvs = document.getElementById('canvas');
  27.   ctx = cvs.getContext('2d');
  28.   ctx.lineWidth = 1;
  29.   ctx.beginPath();
  30.   ctx.moveTo(50, 10);
  31.   ctx.lineTo(550, 10);
  32.   ctx.stroke();
  33.   ctx.beginPath();
  34.   ctx.strokeStyle = "#f00";
  35.   ctx.moveTo(50, 100);
  36.   ctx.lineTo(550, 100);
  37.   ctx.stroke();
  38. </script>
  39. </body>
  40. </html>

圆弧与圆形

Canvas绘图环境提供了两个用于绘制圆弧与圆形的方法： arc() arcTo()

arc(x, y, radius, startAngle, endAngle, counterClockwise)

前面两个参数表示圆心坐标，radius表示圆半径，startAngle和endAngle表示浏览器在圆周上绘制圆弧的起始角度和终结角度，最后一个参数，counterClockwise是可选的，true，是逆时针画圆，false，顺时针画圆。

arcTo(x1, y1, x2, y2, radius)

参数意为两个点与半径

该方法以指定的半径来绘制一条圆弧，绘制的圆弧与当前点到第一个点(x1, y1)的连线相切，而且与第一个点到第二个点(x2, y2)的连线也相切，由于这些特性，该方法非常适合绘制矩形的圆角。

坐标变换：平移、缩放与旋转

这里看一个小例子，也许这里坐标原点的移动并没有带来多大的好处，但想像一下，如果你需要绘制的是很多图形的情景

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  5.   <meta charset="utf-8">
  6.   <title>TEST APP</title>
  7.   <style>
  8.     * {
  9.       padding: 0;
  10.       margin: 0;
  11.     }
  12.     #canvas {
  13.       background: #ccc;
  14.       border: 1px solid #aaa;
  15.       border-radius: 8px;
  16.       display: block;
  17.       margin: 20px auto;
  18.     }
  19.   </style>
  20. </head>
  21. <body>
  22. <canvas id="canvas" width="600" height="400">
  23.   Canvas is not supported.
  24. </canvas>
  25. <script>
  26.   var cvs = document.getElementById("canvas"),
  27.   ctx = cvs.getContext('2d'),
  28.   RECTANGLE_WIDTH = 100,
  29.   RECTANGLE_HEIGHT = 100;
  30.   //没有移动坐标原点的情况
  31.   ctx.strokeRect(cvs.width / 2 - RECTANGLE_WIDTH ,
  32.     cvs.height / 2 - RECTANGLE_HEIGHT,
  33.     RECTANGLE_WIDTH, RECTANGLE_HEIGHT);
  34.   //移动坐标原点
  35.   ctx.translate(cvs.width / 2 - RECTANGLE_WIDTH / 2, cvs.height / 2 - RECTANGLE_HEIGHT / 2);
  36.   ctx.beginPath();
  37.   ctx.strokeStyle = "#f00";
  38.   ctx.strokeRect(0, 0, RECTANGLE_WIDTH, RECTANGLE_HEIGHT);
  39. </script>
  40. </body>
  41. </html>

 

本文所有前端代码均在谷歌浏览器测试，其他浏览器没有测试过

Canvas绘图基础（一）的更多相关文章

  1. Android中Canvas绘图基础详解（附源码下载） (转)

    Android中Canvas绘图基础详解(附源码下载) 原文链接  http://blog.csdn.net/iispring/article/details/49770651   AndroidCa ...

  2. canvas绘图基础

    <canvas>元素是HTML5中的绘图元素,通过定义一个画布区域,然后使用javascript动态地在这个区域里面绘制图形,对于2D和3D图形都可以绘制,我们将其分成2D上下文和WebG ...

  3. HTML5自学笔记[ 11 ]canvas绘图基础1

    html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支 ...

  4. canvas绘图基础及基于粒子系统的雪花飘落

    canvas是html中的一个元素,可以通过js操控绘图! 可以绘制各种图形,各种填充样式! 绘制时可以进行旋转,缩放,平移,但并不是很灵活! 有一对比较好用的方法是save restore! sav ...

  5. HTML5 canvas绘图基础（电子名片生成器源码）

    创建canvas <canvas id="myCanvas" class="canvas"> 您的浏览器不支持canvas </canvas& ...

  6. HTML5自学笔记[ 17 ]canvas绘图基础4

    绘制图像: drawImage(oImg,x,y),oImg是一个Image对象,(x,y)为绘制起点,绘制的图像大小和源图大小一样. drawImage(oImg,x,y,w,h),后两个参数设置绘 ...

  7. HTML5自学笔记[ 16 ]canvas绘图基础3

    canvas还提供提供了一些动态方法,使图像可以旋转.缩放和移动,与css3中的方法一样. 移动:translate(x,y),x和y为横竖方向的偏移量 旋转:rotate(弧度),弧度=角度*Mat ...

  8. HTML5自学笔记[ 14 ]canvas绘图基础2

    canvas绘制路径不仅可以绘制直线和多边形,还提供了绘制曲线的方法,利用这些方法可以画出多种曲线效果. 方法1:arc(x,y,r,起始弧度,结束弧度,绘制方向);其中(x,y)为圆心坐标,r为半径 ...

  9. HTML5自学笔记[ 23 ]canvas绘图基础7

    变换矩阵: transform(a,b,c,d,e,f),多次使用该函数,效果是多次状态改变的累加: setTransform(a,b,c,d,e,f),会忽略之前的变换,从起始状态开始改变.

随机推荐

  1. [Asp.net 5] Localization-Asp.net运行时多语言

    本节介绍的是Microsoft.AspNet.Localization工程.该工程是运行在Asp.net 5环境中的运行时多语言设置. ASP.net 5中间件技术 在新的Asp.net 5中,可以将 ...

  2. php中的登陆login

    Login <?php require "../include/DBClass.php"; $username=$_POST['UserName']; $password=$ ...

  3. WCF入门教程（五）配置文件

    WCF入门教程(五)配置文件 服务协定以及实现写好后,需要将相关服务公布出去,就需要HOST来承载,供客户端来调用. 承载服务有两种方式,一种通过配置文件,一种通过代码进行配置.上一章已经介绍了代码方 ...

  4. GJM ：多人在线游戏的设计思路

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

  5. 动画在webapp中的现状

    webapp的一大优势便是在view切换时候可以拥有媲美与native的动画效果,但是很多时候那只是一种想法,真正的情况却不是这样 产生此问题的原因有: ① 手机CPU烂! ② 手机显卡烂!就算四核其 ...

  6. tomcat远程调试javaweb

    当把一个本地项目部署到远程服务器后有可能出现意想不到错误,这个时候通过远程调试能够更清楚的找到bug所在位置. 目前百度tomcat绝大多数方法都是在startup.sh或者catalina.sh增加 ...

  7. jQuery插件中文乱码解决办法

    修改jQuery插件源代码的时候,中文字符有时候会显示乱码,通常这个插件是老外写的,默认文件的编码格式ANSI格式,源代码写中文字符的时候就会显示乱码,解决方法就是将文件编码格式换成UTF-8格式 保 ...

  8. O365（世纪互联）SharePoint 之文档库使用小记

    前言 当O365越来越流行的时候,大家往往更多使用的是传统的Office功能,有太少订阅用户能触及到O365的一个非常棒的功能,叫做SharePoint online. 下面,我们就以图文并茂的方式, ...

  9. 用Kotlin开发Android应用（III）：扩展函数和默认值

    这是关于Kotlin的第三篇. 原文标题:Kotlin for Android (III): Extension functions and default values 原文链接:http://an ...

  10. [Android]一个干净的架构（翻译）

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/5276587.html 一个干净的架构 原文:https://b ...