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. Qt入门（8）——事件和事件过滤器

    在Qt里,一个事件是继承自QEvent的对象.事件通过调用QObject::event(),被发送到继承自 QObject 的对象.事件发送就是一个事件已经产生,由 QEvent正好去表达,且QObj ...

  2. Visual Studio Code尝试体验

    背景了解 偶然间看到一篇大赞Visual Studio Code的文章,就搜索了一下,发现网上基本一致的好评.虽然微软在2015年4月29号 Build 2015 大会上才发布,但免费,轻量,跨平台版 ...

  3. 搜索（DLX）：HDU 3663 Power Stations

    Power Stations Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  4. zoj 1586

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1586 //zoj 1586 #include<iostream> ...

  5. VMware连不上网解决

    在VMware里安装了ubuntu,但是某一天打开它,ubuntu忽然不能上网了,于是百度了好几个方法,最后是这样解决的: 额...现在连接的是无线,前两天出问题的时候连接的是有线,在Internet ...

  6. + (void)load和+ (void)initialize有什么用处

    两个方法都可以进行一些类的初始化操作.其中有些小区别.+(void)load 方法只要加入了工程种,进行了编译,且.m中实现了这个方法,都会调用一次,值得注意的时没实现的子类是不会调用的,就算父类实现 ...

  7. 接口中的成员变量必须是static

    首先要弄清接口的含义. 接口就是提供一种统一的'协议’, 而接口中的属性也属于'协议’中的成员.它们是公共的,静态的,最终的常量.相当于全局常量. 在interface里面的变量都是public st ...

  8. 服务器CPU使用率高的原因分析与解决办法

    我们的服务器在使用操作系统的时候,用着用着系统就变慢了,打开“ 任务管理器 ”一看,才发现CPU使用率达到80%以上.这是怎么回事情呢?遇到病毒了吗?硬件有问题?还是系统设置有问题呢?在本文中将从硬件 ...

  9. call, apply的用法意义以及区别是什么

    call和apply没有什么大的区别,两者的作用都是:改变对象的this指向的内容. 他们的写法不同,如下: func.call(func1, var1, var2, var3); func.appl ...

  10. 统计学习导论：基于R应用——第四章习题

    第四章习题,部分题目未给出答案 1. 这个题比较简单,有高中生推导水平的应该不难. 2~3证明题,略 4. (a) 这个问题问我略困惑,答案怎么直接写出来了,难道不是10%么 (b) 这个答案是(0. ...