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. POJ-Common Substrings(后缀数组-长度不小于 k 的公共子串的个数)

    题意: 长度不小于 k 的公共子串的个数 分析: 基本思路是计算 A 的所有后缀和 B 的所有后缀之间的最长公共前缀的长度,把最长公共前缀长度不小于 k 的部分全部加起来. 先将两个字符串连起来,中间 ...

  2. 【转】Android开发中adb启动失败adb连接异常的解决办法 offline

    原文网址:http://www.cnblogs.com/yejiurui/p/4173521.html 一.情况描述: 我们在使用eclipse开发有时候会出现adb连接异常中,有时候控制台会打印出来 ...

  3. 【贪心】Codeforces 704B & 705D Ant Man

    题目链接: http://codeforces.com/problemset/problem/704/B 题目大意: 给N个点,起点S终点T,每个点有X,A,B,C,D,根据I和J的X坐标可得I到J的 ...

  4. 获取Android设备屏幕分辨率

    1.Android 4.3引入的wm工具: a.获取Android设备屏幕分辨率: adb shell wm size b.获取android设备屏幕密度: adb shell wm density ...

  5. Java Topology Suite (JTS)与空间数据模型

    JTS是Java的处理地理数据的API,它提供以下功能: 实现了OGC关于简单要素SQL查询规范定义的空间数据模型 一个完整的.一致的.基本的二维空间算法的实现,包括二元运算(例如touch和over ...

  6. FreeMarker-TemplateLoader

    Java中不乏优秀的模板引擎,Velocity,mvel,FreeMarker等.在构建框架的时候,通常可以拿来即用,但我们需要控制它.最近需要一个数据准备的框架,便选择了FreeMarker,Fre ...

  7. iOS 用CocoaPods做iOS程序的依赖管理

    文档更新说明 2012-12-02 v1.0 初稿 2014-01-08 v1.1 增加设置 ruby 淘宝源相关内容 2014-05-25 v2.0 增加国内 spec 镜像.使用私有 pod.po ...

  8. 在VC中集成cURL

    libcurl 库的代码是完全开源的,但是我们一般不会在项目中直接引入它的源代码,而是通过动态链接库隐式链接的方式引入 libcrul 库.也就是说,我们需要在自己的项目中引入 libcrul 相关的 ...

  9. GPRS

    互动百科http://www.baike.com/wiki/GPRS 百度百科http://baike.baidu.com/link?url=M-ElL_qR1bwzUr7BdrDgN4EzBhYYJ ...

  10. 一个美国小券商的生存之道Tradestation

    转自:证券时报记者 张欣然 桂衍民 中国互联网金融的口号喊了十几年,众多证券公司仍然苦于找不到新的蓝海,研究大西洋彼岸的美国TradeStation公司的业务模式,也许对国内的证券公司会有一些启迪. ...