html5--canvas学习笔记

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上，即时生效。所有其他的图形的绘制都至少需要生成一条路径。

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

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

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学习笔记的更多相关文章

HTML5 canvas学习笔记（一）
canvas是HTML5中新增的标签,下面是各浏览器的支持程度: canvas的默认大小为:宽-300px,高-150px(注意:画布的大小作为canvas标签的行内样式设置,而且是没有“px”单位的 ...
canvas学习笔记、小函数整理
http://bbs.csdn.net/topics/391493648 canvas实例分享 2016-3-16 http://bbs.csdn.net/topics/390582151 html5 ...
canvas学习笔记，实用知识点总结（上）
本博客是本人日常学习笔记,作为重要知识点的总结记录,随笔风格可能更倾向于个人的学习习惯和方式,若对您有帮助十分荣幸,若存在问题欢迎互相学习探讨,前端小白一枚在此恭候. 一.基本使用规则 1.创建画布 ...
canvas学习笔记（下篇） -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例（星空/时钟/小球）
[下篇] -- 建议学习时间4小时课程共(上中下)三篇此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
canvas学习笔记（中篇） -- canvas入门教程-- 颜色/透明度/渐变色/线宽/线条样式/虚线/文本/阴影/图片/像素处理
[中篇] -- 建议学习时间4小时课程共(上中下)三篇此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
canvas学习笔记（上篇）-- canvas入门教程 -- canvas标签/方块/描边/路径/圆形/曲线
[上篇] -- 建议学习时间4小时课程共(上中下)三篇此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
[HTML5 Canvas学习] 基础知识
HTML5 canvas元素通过脚本语言(通常是Javascript) 绘制图形, 它仅仅是一个绘图环境,需要通过getContext('2d')方法获得绘图环境对象,使用绘图环境对象在canvas元 ...
HTML5硕士学习笔记
如今,该集团经过培训的同事给大家HTML5,他出席了两个5训练日,大概过一次给我们,在一个很形象.同事们更感兴趣的是. 课后共享所有的课件.在热情的新技术,我想工作有一个良好的早晨,我决定重新学习课件 ...
canvas学习笔记（一）-认识canvas
canvas是html5新增的一个标签,主要用于图形的绘制.我们可以把它理解为是浏览器给我们提供了一个画板,至于要绘制怎样的画卷,就看神笔马良你的主意了.而在canvas上绘制图形使用的笔,就是js了 ...
canvas学习笔记一
为了研究pixi库,就顺带从头到位学习下canvas吧判断支持力度 var webgl = (function() { try { var canvas = document.createEleme ...

随机推荐

【JS】壹零零壹
function f1() { } var f2 = function() { } var O = {} O.f1 = f1 O.f2 = f2 console.log(O)
Watch OS2.0开发概述
(注:尊重劳动成果,转载请注明出处 http://www.cnblogs.com/xiaochunle/p/4620230.html ) Watch OS 2.0时代北京时间2015年6月9日,WW ...
Win7下IE8无法打开https类型的网站解决方法笔记
现象: 一台笔记本(XP系统),一台台式机(Win7,64位系统),都是IE8,之前没任何问题,访问https也没异常,都能正常访问; 前天突然发现登录火车票网站出现无法打开登录页面情况,后来换其 ...
CodeForces 595A
题目链接: http://codeforces.com/problemset/problem/595/A 题意: 一栋楼,有n层,每层有m户,每户有2个窗户,问这栋楼还有多少户没有睡觉(只要一个窗户灯 ...
对MMU段式转换的理解
本文将详细介绍MMU段式转换的过程,并在文末附上一篇讲MMU比较详细的文章.具体什么是MMU,什么时段是转换就不在本文讲了,直接戳文末的链接. 首先,进行段式转换的条件.我们要拥有一个虚拟地址,还有一 ...
F - Wormholes
题目大意: 农民约翰在农场散步的时候发现农场有大量的虫洞,这些虫洞是非常特别的因为它们都是单向通道,为了方便现在把约翰的农田划分成N快区域,M条道路,W的虫洞. 约翰是时空旅行的粉丝,他希望这样做,在 ...
iPhone应用中如何避免内存泄露？
如何有效控制iPhone内存管理的对象的所有权与引用计数和以及iPhone内存的自动释放与便捷方法.本文将介绍在iPhone应用中如何避免内存泄露.想了解“在iPhone应用中如何避免内存泄露”就必须 ...
Django之牛刀初试
一.Django安装 1.使用pip安装django pip3 inistall django 2.将django-admin加入到环境变量中 # 如果是windows的系统需要操作这一步,linux ...
iOS中@class #import #include 简介
[转载自:http://blog.csdn.net/chengwuli125/article/details/9705315] 一.解析很多刚开始学习iOS开发的同学可能在看别人的代码 ...
C#读写共享文件夹
该试验分以下步骤: 1.在服务器设置一个共享文件夹,在这里我的服务器ip地址是10.80.88.180,共享文件夹名字是test,test里面有两个文件:good.txt和bad.txt,访问权限,用 ...

html5--canvas学习笔记

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

随机推荐

热门专题