什么是 Canvas?

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域,您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建一个画布(Canvas)

一个画布在网页中是一个矩形框,通过 (canvas) 元素来绘制.

注意: 默认情况下 (canvas) 元素没有边框和内容。

(canvas)简单实例如下:

<canvas id="myCanvas" width="200" height="100"></canvas>

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.

提示:你可以在HTML页面中使用多个 (canvas) 元素.

使用 style 属性来添加边框:

实例

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

通过 JavaScript 来绘制

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
//创建context对象
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

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

下面的两行代码绘制一个红色的矩形:

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。

Canvas - 路径

在Canvas上画线,我们将使用以下两种方法:

  • moveTo(x,y) 定义线条开始坐标
  • lineTo(x,y) 定义线条结束坐标

绘制线条我们必须使用到 "ink" 的方法,就像stroke().

实例

定义开始坐标(0,0), 和结束坐标 (200,100). 然后使用 stroke() 方法来绘制线条:

JavaScript:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

在canvas中绘制圆形, 我们将使用以下方法:

  • arc(x,y,r,start,stop)

实例

使用 arc() 方法 绘制一个圆:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

实例 - 曲线

通过指定从何处开始,在何处结束,来绘制一条曲线:

<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(188, 150);
context.quadraticCurveTo(288, 0, 388, 150);
context.lineWidth = 10;
// line color
context.strokeStyle = 'orange';
context.stroke();
</script>

实例 - 渐变

使用您指定的颜色来绘制渐变背景:

JavaScript 代码:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>

实例 - 图像

把一幅图像放置到画布上, 使用以下方法:

  • drawImage(image,x,y)
<script>

   var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream"); //图片id
ctx.drawImage(img,10,10); </script>

HTML canvas的更多相关文章

  1. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  2. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

  3. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  4. 获取Canvas当前坐标系矩阵

    前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...

  5. Canvas坐标系转换

    默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...

  6. Canvas绘图之平移translate、旋转rotate、缩放scale

    画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...

  7. 用html5的canvas和JavaScript创建一个绘图程序

    本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...

  8. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

  9. 使用 JavaScript 和 canvas 做精确的像素碰撞检测

    原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...

  10. H5项目开发分享——用Canvas合成文字

    以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

随机推荐

  1. LightOJ——1012Guilty Prince(连通块并查集)

    1012 - Guilty Prince Time Limit: 2 second(s) Memory Limit: 32 MB Once there was a king named Akbar. ...

  2. VS的一些错误解决方法记录

    1.errorC2664 "bool CMarkup::AddElem(MCD_CSTR,MCD_CSTR,int)":不能将参数1从“constchar [7]” 转换位&quo ...

  3. AtCoder Grand Contest 005F - Many Easy Problems

    $n \leq 200000$的树,从树上选$k$个点的一个方案会对$Ans_k$产生大小为“最小的包括这$k$个点的连通块大小”的贡献.求每个$Ans_k$.膜924844033. 看每个点对$An ...

  4. gridview和detailsview的完美结合运用实现增删改

    原文发布时间为:2008-07-24 -- 来源于本人的百度文章 [由搬家工具导入] 1、因Gridview中没有增加记录,所以应利用datalistview或formview来弥补。 2、因为det ...

  5. 并发编程辅助工具-java.util.concurrent

    1. CountDownLatch 类似于计数器的功能,主要用于控制某个任务的执行先后顺序,可以控制某个任务在其他任务(可能是多线程的)执行完 之后,才会去执行. public static void ...

  6. linux 抓取访问量排行

    需求: 分析图片服务日志,把日志(每个图片访问次数*图片大小的总和)排行,取top10,也就是计算每个url的总访问大小 语句: awk '{a[$1]+=$10;}END{for(i in a){p ...

  7. list或map 打印成json 方便调试

    private final Logger logger = Logger.getLogger(this.getClass()); logger.info(JSON.toJSONStringWithDa ...

  8. Fragment的广播消息接收

    这种方式不用在配置文件加东西 广播注册,可以写在Activity(onCreate),也可以写在Fragment(onActivityCreated)里. LocalBroadcastManager ...

  9. 使用Crypto对数据进行加密解密

    注释都在代码里: 先撸客户端: from Crypto.Cipher import AES import base64,requests class Message(object): def __in ...

  10. Xcode 技巧充电篇

    作为project师,我们最重要的事情就是熟悉我们每天使用的日常工具,但不能仅限于此.仅仅要有可能,我们应该试着掌握和定制能使我们更快.更轻松地实现终于目标的工具.以下是一些小提示和技巧,都是我在 X ...