文档章节

canvas学习笔记

别人说我名字很长
 别人说我名字很长
发布于 08/11 14:55
字数 1369
阅读 8
收藏 0

Canvas 对象

Canvas 对象表示一个 HTML 画布元素 - <canvas>。它没有自己的行为,但是定义了一个 API getContext('2d') 支持脚本化客户端绘图操作。

  • 设置画布宽

canvas.width = 200;

  • 设置画布高

canvas.height = 300;

  • 使用toDataURL将图片转为dataURL(base64)

canvas.toDataURL("image/png");

  • 使用toBlob方法将图片转为blob对象

canvas.toBlob(function (blob) {})

let canvas = document.createElement('canvas');
canvas.width = 250;
canvas.height = 300;
canvas.style.border="1px dashed #ccc";
document.body.appendChild(canvas);

CanvasRenderingContext2D 对象的方法

<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。通过Canvas实例对象的getContext('2d')方法可以返回一个CanvasRenderingContext2D 对象,操作画布的大多数方法都是采用这个对象的方法。HTML5还有一个WebGL规范,允许在Canvas中绘制3D图形getContext("webgl")

  • canvas.getContext('2d') - 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
var ctx = canvas.getContext('2d');

CanvasRenderingContext2D 对象拥有以下属性和方法

  • arc() 用一个中心点和半径,为一个画布的当前子路径添加一条弧线。
  • arcTo() 使用目标点和一个半径,为当前的子路径添加一条弧线。
  • beginPath() 开始一个画布中的一条新路径(或者子路径的一个集合)。
  • bezierCurveTo() 为当前的子路径添加一个三次贝塞尔曲线。
  • clearRect() 在一个画布的一个矩形区域中清除掉像素。
  • clip() 使用当前路径作为连续绘制操作的剪切区域。
  • closePath() 如果当前子路径是打开的,就关闭它。
  • createLinearGradient() 返回代表线性颜色渐变的一个 CanvasGradient 对象。
  • createPattern() 返回代表贴图图像的一个 CanvasPattern 对象。
  • createRadialGradient() 返回代表放射颜色渐变的一个 CanvasGradient 对象。
  • drawImage() 绘制一幅图像。
  • fill() 使用指定颜色、渐变或模式来绘制或填充当前路径的内部。
  • fillRect() 绘制或填充一个矩形。
  • lineTo() 为当前的子路径添加一条直线线段。
  • moveTo() 设置当前位置并开始一条新的子路径。
  • quadraticCurveTo() 为当前路径添加一条贝塞尔曲线。
  • rect() 为当前路径添加一条矩形子路径。
  • restore() 为画布重置为最近保存的图像状态。
  • rotate() 旋转画布。
  • save() 保存 CanvasRenderingContext2D 对象的属性、剪切区域和变换矩阵。
  • scale() 标注画布的用户坐标系统。
  • stroke() 沿着当前路径绘制或画一条直线。
  • strokeRect() 绘制(但不填充)一个矩形。
  • translate() 转换画布的用户坐标系统。

例子

矩形

  • ctx.rect(x,y,width,height) 创建矩形。
  • ctx.fillRect(x,y,width,height) 绘制并填充一个矩形
  • ctx.strokeRect(x,y,width,height) 绘制矩形(无填充)。
  • ctx.clearRect(x,y,width,height) 在给定的矩形内清除指定的像素。

创建矩形

ctx.rect(0,0,200,200)
ctx.stroke()

绘制填充矩形

ctx.fillStyle="green"
ctx.fillRect(0,0,200,200)

绘制矩形(无填充)

ctx.strokeStyle='red'
ctx.strokeRect(10,10,180,180)

在给定的矩形内清除指定的像素

ctx.fillStyle='red'
ctx.fillRect(0,0,200,200)
ctx.clearRect(20,20,100,50)

路径 - 线条

  • ctx.moveTo(x,y) 定义线条开始坐标
  • ctx.lineTo(x,y) 定义线条结束坐标
  • ctx.beginPath() 起始一条路径,或重置当前路径。
  • ctx.closePath() 创建从当前点回到起始点的路径。
  • ctx.stroke() 绘制已定义的路径。
  • ctx.clip() 从原始画布剪切任意形状和尺寸的区域。
  • ctx.isPointInPath(x,y) 返回当前的路径点是否在画板中
  • ctx.arcTo(x1,y1,x2,y2,r) 创建介于两个切线之间的弧/曲线
  • ctx.quadraticCurveTo(cpx,cpy,x,y) 创建二次贝塞尔曲线。
  • ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) 创建三次贝塞尔曲线。

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

ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.lineTo(80,250);
ctx.stroke();

//开始一条新路径,画线,闭合路径
ctx.beginPath();
ctx.moveTo(20,20)
ctx.lineTo(100,150)
ctx.lineTo(180,20)
ctx.closePath()
ctx.stroke()

//从上一个路径裁剪一个区域
ctx.clip();
ctx.fillStyle = 'green'
ctx.fillRect(0,0,150,100)

创建二次贝塞尔曲线。

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()

创建介于两个切线之间的弧/曲线。

ctx.beginPath()
ctx.moveTo(20,20)
ctx.lineTo(100,20)
ctx.arcTo(150,20,150,50,50)
ctx.lineTo(150,120)
ctx.stroke()

路径-画圆

  • ctx.beginPath() 开始一个画布中的一条新路径
  • ctx.arc(x,y,r,start,stop) 用一个中心点和半径,为一个画布的当前子路径添加一条弧线。
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

路径 - 填充

  • fill() 填充当前绘图(路径)。
ctx.rect(10,10,180,180)
ctx.fillStyle = "red"
ctx.fill();

文本

  • ctx.font - 定义字体
  • ctx.fillText(text,x,y) - 绘制实心文本
  • ctx.strokeText(text,x,y) - 绘制空心文本
ctx.font = '30px Arial';
ctx.fillText('Hello word',30,30)
ctx.strokeText('你好 世界',30,60)

渐变

  • createLinearGradient(x,y,x1,y1) -创建线条渐变
  • createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

当我们使用渐变对象,必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1.

使用线条渐变createLinearGradient

//创建一个线条渐变
let grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,'red')
grd.addColorStop(1,'green')

//填充渐变
ctx.fillStyle=grd
ctx.fillRect(10,10,150,80)

使用径向渐变createRadialGradient

//创建一个径向/圆渐变
let grd = ctx.createRadialGradient(100,100,5,100,100,100);
grd.addColorStop(0,'red')
grd.addColorStop(1,'green')

//使用渐变填充圆形
ctx.arc(100,100,100,0,2*Math.PI);
ctx.fillStyle=grd
ctx.fill();

图像

  • ctx.drawImage() 绘制一幅图像到画布上
let img = document.getElementById('scream');
img.onload = ()=>{
    ctx.drawImage(img,10,10)
}

参考资料

http://www.runoob.com/html/html5-canvas.html

http://www.runoob.com/tags/ref-canvas.html

© 著作权归作者所有

共有 人打赏支持
别人说我名字很长
粉丝 55
博文 254
码字总数 103692
作品 0
济南
程序员
《WebGL编程指南》学习笔记——3.在Canvas中使用WebGL

《WebGL编程指南》学习笔记——2.在Canvas中使用WebGL 上一节学习了使用< canvas >元素绘制二维图形,这一节里面我们在< canvas >中使用WebGL 下小节我们正式开始学习如何在< canvas >中使用...

hushhw
2017/12/19
0
0
《WebGL编程指南》学习笔记——2.使用元素

《WebGL编程指南》学习笔记——2.使用< canvas >元素 上一节初步认识了WebGL,这一小节我们来开始学习使用< canvas >元素绘制二维图形 WebGL编程指南学习笔记2使用 canvas 元素 下小节我们正...

hushhw
2017/12/16
0
0
JavaEE——HTML5绘画

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 绘画是HTML5的新功能,以前是没有的,有flash的...

凯哥学堂
2017/10/30
0
0
Windows8/Silverlight/WPF/WP7/HTML5周学习导读(1月28日-2月3日)

Windows8/Silverlight/WPF/WP7/HTML5周学习导读(1月28日-2月3日) 本周Windows 8开发学习资源更新 本周Silverlight学习资源更新 本周Windows Phone开发学习资源更新 本周WPF学习资源推荐 本周...

冷秋寒
06/29
0
0
canvas 学习笔记

由于公司业务需要,要用canvas,实现一些比较炫酷的效果,所以这段时间领导让学canvas,正好个人想用canvas做个网站宠物,给以后自己的个人博客用,所以两全其美,就开始了。 需要的基础知识...

起什么name呢
2016/04/23
93
0

没有更多内容

加载失败,请刷新页面

加载更多

防止快速重复点击的两种思维

防止重复执行的两种思维 场景 下单时,提交按钮,因为网络卡顿或者手快重复点击,导致重复提交订单; 微博,更新个人状态或发表评论时,快速多次点击[发送]按钮,导致相同的信息发送多次. 解决思路 ...

黄威
39分钟前
0
0
在windows环境下使用Virtualbox虚拟Debian系统来运行Docker

标题绕口。 我之前一直使用 Virtualbox 和 homestead 来运行我的 PHP 开发环境。最近决心开始尝试 DevOps,使得开发、部署容器化,来化解人为操作失误和环境不兼容等问题造成的各种损失。就打...

zgldh
41分钟前
0
0
python map()

map()函数 map()是 Python 内置的高阶函数,它接收一个函数 f 和一个 list,并通过把函数 f 依次作用在 list 的每个元素上,得到一个新的 list 并返回。(利用生成器的原理,并不马上返回值,...

南桥北木
55分钟前
0
0
分享几个 SpringBoot 实用的小技巧

前言 最近分享的一些源码、框架设计的东西。我发现大家热情不是特别高,想想大多数应该还是正儿八经写代码的居多;这次就分享一点接地气的: SpringBoot 使用中的一些小技巧。 算不上多高大上...

Java干货分享
55分钟前
2
0
day123-20181021-英语流利阅读-待学习

这款新字体,比记忆面包还管用 Lala 2018-10-21 1.今日导读 字体能跟学习效果有什么关系?你还别说,来自澳洲的心理学家和设计师们,还真创造了一款号称能够帮助大家记忆信息、增强学习效果的...

飞鱼说编程
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部