Canvas绘图基础（一）
简单图形绘制
矩形：描边与填充
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)
看一下这三个方法的使用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta charset="utf-8">
<title>TESTAPP</title>
<style>
* {
padding: 0;
margin: 0;
}
#canvas {
background: #ccc;
border: 1px solid #aaa;
border-radius: 8px;
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400">
Canvas is not supported.
</canvas>
<script>
var cvs = document.getElementById('canvas');
ctx = cvs.getContext('2d');
ctx.lineJoin = 'round';
ctx.lineWidth = 30;
ctx.font = "24px Helvetica";
ctx.fillText("Click anywhere to erase", 175, 40);
ctx.strokeRect(75, 100, 200, 200);
ctx.fillRect(325, 100, 200, 200);
ctx.canvas.onmousedown = function(e) {
ctx.clearRect(0, 0, cvs.width, cvs.height);
};
</script>
</body>
</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()方法。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta charset="utf-8">
<title>TEST APP</title>
<style>
* {
padding: 0;
margin: 0;
}
#canvas {
background: #ccc;
border: 1px solid #aaa;
border-radius: 8px;
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400">
Canvas is not supported.
</canvas>
<script>
var cvs = document.getElementById('canvas');
ctx = cvs.getContext('2d');
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(50, 10);
ctx.lineTo(550, 10);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "#f00";
ctx.moveTo(50, 100);
ctx.lineTo(550, 100);
ctx.stroke();
</script>
</body>
</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)的连线也相切，由于这些特性，该方法非常适合绘制矩形的圆角。
坐标变换：平移、缩放与旋转
这里看一个小例子，也许这里坐标原点的移动并没有带来多大的好处，但想像一下，如果你需要绘制的是很多图形的情景
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta charset="utf-8">
<title>TEST APP</title>
<style>
* {
padding: 0;
margin: 0;
}
#canvas {
background: #ccc;
border: 1px solid #aaa;
border-radius: 8px;
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400">
Canvas is not supported.
</canvas>
<script>
var cvs = document.getElementById("canvas"),
ctx = cvs.getContext('2d'),
RECTANGLE_WIDTH = 100,
RECTANGLE_HEIGHT = 100;
//没有移动坐标原点的情况
ctx.strokeRect(cvs.width / 2 - RECTANGLE_WIDTH ,
cvs.height / 2 - RECTANGLE_HEIGHT,
RECTANGLE_WIDTH, RECTANGLE_HEIGHT);
//移动坐标原点
ctx.translate(cvs.width / 2 - RECTANGLE_WIDTH / 2, cvs.height / 2 - RECTANGLE_HEIGHT / 2);
ctx.beginPath();
ctx.strokeStyle = "#f00";
ctx.strokeRect(0, 0, RECTANGLE_WIDTH, RECTANGLE_HEIGHT);
</script>
</body>
</html>
本文所有前端代码均在谷歌浏览器测试，其他浏览器没有测试过
Canvas绘图基础（一）的更多相关文章
- Android中Canvas绘图基础详解（附源码下载） (转)
Android中Canvas绘图基础详解(附源码下载) 原文链接 http://blog.csdn.net/iispring/article/details/49770651 AndroidCa ...
- canvas绘图基础
<canvas>元素是HTML5中的绘图元素,通过定义一个画布区域,然后使用javascript动态地在这个区域里面绘制图形,对于2D和3D图形都可以绘制,我们将其分成2D上下文和WebG ...
- HTML5自学笔记[ 11 ]canvas绘图基础1
html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支 ...
- canvas绘图基础及基于粒子系统的雪花飘落
canvas是html中的一个元素,可以通过js操控绘图! 可以绘制各种图形,各种填充样式! 绘制时可以进行旋转,缩放,平移,但并不是很灵活! 有一对比较好用的方法是save restore! sav ...
- HTML5 canvas绘图基础（电子名片生成器源码）
创建canvas <canvas id="myCanvas" class="canvas"> 您的浏览器不支持canvas </canvas& ...
- HTML5自学笔记[ 17 ]canvas绘图基础4
绘制图像: drawImage(oImg,x,y),oImg是一个Image对象,(x,y)为绘制起点,绘制的图像大小和源图大小一样. drawImage(oImg,x,y,w,h),后两个参数设置绘 ...
- HTML5自学笔记[ 16 ]canvas绘图基础3
canvas还提供提供了一些动态方法,使图像可以旋转.缩放和移动,与css3中的方法一样. 移动:translate(x,y),x和y为横竖方向的偏移量 旋转:rotate(弧度),弧度=角度*Mat ...
- HTML5自学笔记[ 14 ]canvas绘图基础2
canvas绘制路径不仅可以绘制直线和多边形,还提供了绘制曲线的方法,利用这些方法可以画出多种曲线效果. 方法1:arc(x,y,r,起始弧度,结束弧度,绘制方向);其中(x,y)为圆心坐标,r为半径 ...
- HTML5自学笔记[ 23 ]canvas绘图基础7
变换矩阵: transform(a,b,c,d,e,f),多次使用该函数,效果是多次状态改变的累加: setTransform(a,b,c,d,e,f),会忽略之前的变换,从起始状态开始改变.
随机推荐
- Rafy 领域实体框架演示(3) - 快速使用 C/S 架构部署
本系列演示如何使用 Rafy 领域实体框架快速转换一个传统的三层应用程序,并展示转换完成后,Rafy 带来的新功能. <福利到!Rafy(原OEA)领域实体框架 2.22.2067 发布!> ...
- asp.net WebService+Ajax调用
default.aspx 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile=&qu ...
- 关系数据库SQL之可编程性存储过程
前言 前面关系数据库SQL之可编程性函数(用户自定义函数)一文提到关系型数据库提供了可编程性的函数.存储过程.事务.触发器及游标,前文已介绍了函数,本文来介绍一下存储过程的创建.执行.删除.(还是以前 ...
- jquery easyui使用（二）······可折叠面板动态加载无效果
先上代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"& ...
- HTTP协议详解
Author :Jeffrey 引言 HTTP 是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到不断地完善和 扩展. ...
- 【工匠大道】将项目同时托管到Github和Git@OSC
原文地址 摘要: Github是最大的git代码托管平台,GIT@OSC是国内最大的git代码托管平台,支持免费私有库,支持SVN操作,用户众多.很多用户需要同时将代码托管到两个平台,这篇文章的主要 ...
- 为什么你不应该使用 MongoDB
本文转载自: http://www.oschina.net/translate/why-you-should-never-use-mongodb (只作转载, 不代表本站和博主同意文中观点或证实文中信 ...
- iOS 苹果开发证书失效的解决方案(Failed to locate or generate matching signing assets)
从2月14日开始,上传程序的同学可能会遇到提示上传失败的提示. 并且打开自己的钥匙串,发现所有的证书全部都显示此证书签发者无效. 出现以下情况: Failed to locate or generat ...
- 服务器重启后导致访问ArcServer地图服务须登录
问题状况: 重启服务器后,在访问网站的地图服务时会提示登录,输入各种密码账号都不好用 解决方法: 通过进入[服务管理器],找到ArcGISServer的服务,重新启动该服务就可以.
- cocos2dx骨骼动画Armature源码分析(二)
flash中数据与xml中数据关系 上篇博文从总体上介绍了cocos2dx自带的骨骼动画,这篇介绍一下导出的配置数据各个字段的含义(也解释了DragonBone导出的xml数据每个字段的含义). sk ...