1. 添加<canvas>元素

right:

<canvas id="myCanvas" width="300" height="300"></canvas>

wrong:

.myCanvas{width:300px;height:300px;}

<canvas id="myCanvas"></canvas>

当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。

<canvas> 元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。

2. 获取2D渲染上下文

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

3. 开始绘制

画布坐标空间：

所有api均由ctx来调用。

绘制矩形：

fillRect(x, y, width, height)

//绘制一个填充的矩形，默认填充颜色为黑色

strokeRect(x, y, width, height)

//绘制一个矩形的边框

clearRect(x, y, width, height)

//清除指定矩形区域，让清除部分完全透明

HTML中的元素canvas只支持一种原生的图形绘制：矩形，绘制之后会马上显现在canvas上，即时生效。所有其他的图形的绘制都至少需要生成一条路径。

路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。

  1. 首先，你需要创建路径起始点。
  2. 然后你使用画图命令去画出路径。
  3. 之后你把路径封闭。
  4. 一旦路径生成，你就能通过描边或填充路径区域来渲染图形。
beginPath()

//新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径

moveTo(x, y)

//移动笔触，设置起点

closePath()

//闭合路径之后图形绘制命令又重新指向到上下文中，非必需。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的，什么也不做

stroke()

//通过线条来绘制出之前路径的图形轮廓，描边

fill()

//填充路径的内容区域，调用时没有闭合的形状都会自动闭合，所以不需要再调用closePath()

画图命令：

lineTo(x, y)

//绘制直线，从当前位置到(x, y)的位置

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

//绘制圆弧或者圆,（x,y）为圆心的以radius为半径的，从startAngle开始到endAngle结束，按照anticlockwise给定的方向（False = 顺时针，true = 逆时针, 默认为顺时针）来生成。

注意起始角，结束角的大小定义如下图：

如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。

绘制曲线：

quadraticCurveTo(cpx,cpy,x,y)

//二次贝尔赛曲线. 控制点（cpx, cpy），结束点（x, y）

bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)

//三次贝塞尔曲线, 第一个控制点（cp1x, cp1y）,第二个控制点（cp2x, cp2y），结束点（x, y）

如：

ctx.beginPath();

ctx.moveTo(20,20);

ctx.quadraticCurveTo(20,100,200,20);

ctx.stroke();

ctx.beginPath();

ctx.moveTo(20,20);

ctx.bezierCurveTo(20,100,200,100,200,20);

ctx.stroke();

连续绘制贝塞尔曲线，可以从简单图形如气泡，心形等形成更复杂的图形,。

图形上色：

strokeStyle = color

//设置图形轮廓的颜色

fillStyle = color

//设置图形的填充颜色

//color可以为"orange"，"#FFA500"，"rgb(255,165,0)"，"rgba(255,165,0,0.5)"--带透明度的颜色

一旦设置了 strokeStyle 或者 fillStyle 的值，那么这个新值就会成为新绘制的图形的默认值。如果要给每个图形上不同的颜色，需要重新设置 fillStyle 或 strokeStyle 的值。

设置全局透明度:

globalAlpha = transparencyValue

//有效的值范围是 0.0 （完全透明）到 1.0（完全不透明），默认是 1.0。

线型：

lineWidth = value

//设置线条宽度

lineCap = type

//设置线条末端样式，type包括butt(默认)，round，square

lineJoin = type

//设定线条与线条间接合处的样式，type包括miter(默认)，round，bevel

miterLimit = value

//限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条拐角处内角顶点到外角顶点的长度。

渐变颜色：

//线性渐变

var g=ctx.createLinearGradient(x0,y0,x1,y1);

//(x0,y0),(x1,y1)为渐变起始点，代表了渐变方向

g.addColorStop(stop,color);

//stop取值:0--1，表示%，

//如addColorStop(0.5,'red')表示起始开始的一半长度颜色j为red.

//注意要设置起始颜色addColorStop(0,color)，否则会没有渐变。

//放射形渐变

.createRadialGradient(x0,y0,r0,x1,y1,r1);

//再添加addColorStop()

阴影：

文本绘制:

ctx.font="30px Verdana";

ctx.strokeStyle=...;

ctx.strokeText("Big small.",10,50);

图片编辑：

动画：

canvas优化：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

    <canvas id='hc1' width='400' height='300' style='border:1px solid red;'>

    </canvas>

</html>

<script>

var canvas = document.getElementById("hc1");

var ctx = canvas.getContext("2d");

function addHorizWing(x1,y1,w){

    var h=30;

    ctx.beginPath();

    ctx.moveTo(x1,y1);

    ctx.quadraticCurveTo(x1+w,y1+h,x1+w,y1);

    ctx.fill();

    ctx.moveTo(x1,y1);

    ctx.quadraticCurveTo(x1+w,y1-h,x1+w,y1);

    ctx.fill()

}

addHorizWing(150,50,-120);

addHorizWing(150,50,120);

function addRect(x,y,w,h) {

    ctx.moveTo(x,y);

    ctx.fillRect(x,y,w,h);

 }

 addRect(146,40,8,25);

 ctx.moveTo(150,58);

 ctx.lineTo(140,85);

 ctx.lineTo(160,85);

 ctx.fill();

 ctx.beginPath();

 //ctx.moveTo(140,140);

 //ctx.lineTo(100,140);

 ctx.arc(150,150,70,0.95*Math.PI,1.5*Math.PI);

 ctx.lineTo(190,83);

 ctx.bezierCurveTo(220,100,220,150,210,160);

 ctx.bezierCurveTo(190,180,100,180,80,160)

 ctx.fill();

 ctx.beginPath();

 ctx.fillStyle='#fff';

 ctx.arc(135,135,40,Math.PI,1.5*Math.PI);

 ctx.lineTo(145,95);

 ctx.lineTo(145,135);

 ctx.fill();

 //ctx.stroke();

 ctx.fillStyle='#000';

 addRect(120,170,8,30);

 addRect(170,170,8,30);

 ctx.lineWidth=8;

 ctx.lineCap="round";

 ctx.beginPath();

 //ctx.strokeStyle='#f00';

 ctx.arc(90,180,20,0.5*Math.PI,0.8*Math.PI);

 ctx.stroke();

 //ctx.moveTo(110,200);

 addRect(90,196,110,8);

 //ctx.fill();

</script>

来自Canvas的基本用法 ， HTML 5 Canvas 参考手册

html5--canvas学习笔记的更多相关文章

  1. HTML5 canvas学习笔记（一）

    canvas是HTML5中新增的标签,下面是各浏览器的支持程度: canvas的默认大小为:宽-300px,高-150px(注意:画布的大小作为canvas标签的行内样式设置,而且是没有“px”单位的 ...

  2. canvas学习笔记、小函数整理

    http://bbs.csdn.net/topics/391493648 canvas实例分享 2016-3-16 http://bbs.csdn.net/topics/390582151 html5 ...

  3. canvas学习笔记，实用知识点总结（上）

    本博客是本人日常学习笔记,作为重要知识点的总结记录,随笔风格可能更倾向于个人的学习习惯和方式,若对您有帮助十分荣幸,若存在问题欢迎互相学习探讨,前端小白一枚在此恭候. 一.基本使用规则 1.创建画布 ...

  4. canvas学习笔记（下篇） -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例（星空/时钟/小球）

    [下篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

  5. canvas学习笔记（中篇） -- canvas入门教程-- 颜色/透明度/渐变色/线宽/线条样式/虚线/文本/阴影/图片/像素处理

    [中篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

  6. canvas学习笔记（上篇）-- canvas入门教程 -- canvas标签/方块/描边/路径/圆形/曲线

    [上篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

  7. [HTML5 Canvas学习] 基础知识

    HTML5 canvas元素通过脚本语言(通常是Javascript) 绘制图形, 它仅仅是一个绘图环境,需要通过getContext('2d')方法获得绘图环境对象,使用绘图环境对象在canvas元 ...

  8. HTML5硕士学习笔记

    如今,该集团经过培训的同事给大家HTML5,他出席了两个5训练日,大概过一次给我们,在一个很形象.同事们更感兴趣的是. 课后共享所有的课件.在热情的新技术,我想工作有一个良好的早晨,我决定重新学习课件 ...

  9. canvas学习笔记（一）-认识canvas

    canvas是html5新增的一个标签,主要用于图形的绘制.我们可以把它理解为是浏览器给我们提供了一个画板,至于要绘制怎样的画卷,就看神笔马良你的主意了.而在canvas上绘制图形使用的笔,就是js了 ...

  10. canvas学习笔记一

    为了研究pixi库,就顺带从头到位学习下canvas吧 判断支持力度 var webgl = (function() { try { var canvas = document.createEleme ...

随机推荐

  1. 【转】处理新版Chrome书签、菜单字体不清晰

    原文网址:http://www.nmgwddj.com/share/311.html 昨晚打开Chrome浏览器,忽然感觉有些什么东西变了,仔细看了半天忽然发现,书签中的字体和网页中右键的字体全部都变 ...

  2. （转载）遍历memcache中已缓存的key

    (转载)http://www.cnblogs.com/ainiaa/archive/2011/03/11/1981108.html 最近需要做一个缓存管理的功能.其中有一个需要模糊匹配memcache ...

  3. Redis源码阅读笔记（1）——简单动态字符串sds实现原理

    首先,sds即simple dynamic string,redis实现这个的时候使用了一个技巧,并且C99将其收录为标准,即柔性数组成员(flexible array member),参考资料见这里 ...

  4. pgAdminIII使用图解

    原文地址:http://www.2cto.com/database/201312/267218.html pgAdmin III简介 要打开一个到服务的连接,在树中选择所需的服务,并双击它,或使用“工 ...

  5. Rules

    我们之前处理异常的时候用到过Rules,当然还有很多其他规则.Rules允许弹性的添加或者重定义测试方法的行为.测试者可以重复使用或者扩展下面的某一个Rules,也可以写一个属于自己的规则. 这里先展 ...

  6. scipy安装失败

    pip install scipy安装失败 可以从uci网站下载wheel安装包然后执行pip install xx.whl进行安装 http://www.lfd.uci.edu/~gohlke/py ...

  7. RabbitMQ挂掉问题处理

    开发环境中的rabbitmq总是会挂掉,rabbitmq的执行都是ssh远程登录执行命令: rabbitmq-server & 认为加了&,进程会在后台执行不会受到终端的影响.所以不知 ...

  8. python数据的存储和持久化操作

    Python的数据持久化操作主要是六类:普通文件.DBM文件.Pickled对象存储.shelve对象存储.对象数据库存储.关系数据库存储. 普通文件不解释了,DBM就是把字符串的键值对存储在文件里: ...

  9. 一些正则在js使用方法

    输入框直接正则判断 <input type="password" name="pwd" placeholder="密码只能以数字\英文\@\.& ...

  10. linux —— shell 编程（整体框架与基础笔记）

    导读 关于shell编程基础的学习,网上有很多资源,如果在校图书馆应该也有一些教程,所以这里对于零碎的基础不做详细记录,而只是对一些常用的概念.命令与操作做一个简要的记录,以备方便查找. (本文所有语 ...