Canvas2D基础

简介: 1. canvas内容就是上面这些了,就好比设计师能用的颜色就那么多,但是将颜色,图形组合起来,创意真的是无限的,canvas也是如此。2. webGL是一个 对OpenGL ES 2.0浏览器实现接口,用于3D绘画,生产阶段最好不要用,可用于实验阶段。

Canvas2D基础


Canvas2D基础

Canvas2D基础

什么是Canvas

基本使用

Rectangles(矩形)

Drawing Paths

Drawing Text

Transformations

Drawing Images 图片绘制

shadows 加阴影

Gradients 渐变色

Patterns 模式

Working with Image Data 图像原始数据

Compositing 合成

总结

Canvas2D基础

什么是Canvas

是H5中最受欢迎的元素,在页面上划出一片区域,利用JS在上面画出图形,起初由Apple公司提出,各大浏览器厂商也对其做了不同程度上的实现。canvas中规定了了2D context和3D context(WebGL),目前绝大部分浏览器支持2D context。WebGL的发展还比较缓慢。


基本使用


1、toDataURL() 将画好的图像输出为图片


//get data URI of the image
var imgURI = drawing.toDataURL("image/png");
//display the image
var image = document.createElement("img");
image.src = imgURI;
document.body.appendChild(image);


2、原点是基于canvas元素左上角


3、2D Context的两个基本绘画操作 fill and stroke


Rectangles(矩形)


1、fillRect()



context.fillRect(10, 10, 50, 50);
//draw a blue rectangle that’s semi-transparent
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30, 30, 50, 50);


2、strokeRect()



//draw a red outlined rectangle
context.strokeStyle = "#ff0000";
context.strokeRect(10, 10, 50, 50);
//draw a blue outlined rectangle that’s semi-transparent
context.strokeStyle = "rgba(0,0,255,0.5)";
context.strokeRect(30, 30, 50, 50);


3、clearRect()



//draw a red rectangle
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
//draw a blue rectangle that’s semi-transparent
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30, 30, 50, 50);
//clear a rectangle that overlaps both of the previous rectangles
context.clearRect(40, 40, 10, 10);


Drawing Paths


1、如何画一个表盘


var drawing = document.getElementById("drawing");
//make sure <canvas> is completely supported
if(drawing.getContext) {
    var context = drawing.getContext("2d");
    //start the path
    context.beginPath();
    //draw outer circle
    context.arc(100, 100, 99, 0, 2 * Math.PI, false);
    //draw inner circle
    context.moveTo(194, 100); //将光标移动这个内圆绘制的起点上
    context.arc(100, 100, 94, 0, 2 * Math.PI, false);
    //draw minute hand
    context.moveTo(100, 100);
    context.lineTo(100, 15); // 从最后绘制点到(100,15)绘制一条线
    //draw hour hand
    context.moveTo(100, 100);
    context.lineTo(35, 100);
    //stroke the path
    context.stroke();
}



2、判断一个坐标点是否在绘制路线上


context.isPointInPath(100, 100) // true


Drawing Text


1、fillText() 、  strokeText() 后者很少用


2、3个属性font、 textAlign、 textBaseline


3、Demo



context.font = "bold 14px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("12", 100, 20);
//start-aligned
context.textAlign = "start";
context.fillText("12", 100, 40);
//end-aligned
context.textAlign = "end";
context.fillText("12", 100, 60);


4、measureText()的使用 可以度量文字大小


// 如果文字的长度大于140,就将字体缩小
var fontSize = 100;
context.font = fontSize + "px Arial";
while(context.measureText("Hello world!").width > 140) {
    fontSize--;
    context.font = fontSize + "px Arial";
}
context.fillText("Hello world!", 10, 10);
context.fillText("Font size is " + fontSize + "px", 10, 50);



Transformations

图像变换方法

rotate(angle)

scale(scaleX, scaleY)

translate(x, y)

transform(m1_1, m1_2, m2_1, m2_2, dx, dy)

setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy)


可用translate重新定义原点的位置,

在画圆的时候,可将原点位置移动圆心位置,这样在画圆定位过程中比较方便


context.rotate 注意是将坐标轴进行旋转



Drawing Images 图片绘制


从当前canvasd的坐标(10,10)的位置将图片插入进来(注意,如果图片在canvas中装不下,那么图片是插入不进来的)

var image = document.images[0];
 context.drawImage(image, 10, 10);


1. 指定区域内插入 -- 执行在从(10,10)开始,宽90,高90的区域内绘制图像


context.drawImage(image, 10, 10,90,90)



将图像上指定区域的部分 插入 canvas中的指定区域(相当于剪切原图像上的一部分到canvas中)


//从图像上(0,10)开始,宽150,高385的区域插入到 canvas中从(0,100)开始,宽40,高60的区域内
context.drawImage(image, 0, 10, 150, 385, 0, 100, 40, 60);



  1. 注意,如果插入进来的图片是在别的域名下的,会报错


shadows 加阴影


DEMO:



shadows 加阴影

DEMO:


var drawing = document.getElementById("drawing");
var context = drawing.getContext("2d");
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 4;
context.shadowColor = "rgba(0, 0, 0, 0.5)";
//draw a red rectangle
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
//draw a blue rectangle
context.fillStyle = "rgba(0,0,255,1)";
context.fillRect(30, 30, 50, 50);


Gradients 渐变色


1. 线性渐变



var gradient = context.createLinearGradient(30, 30, 80, 80);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black");
context.fillStyle = gradient;
context.fillRect(30, 30, 50, 50);


1.径项渐变



var gradient = context.createRadialGradient(55, 55, 10, 55, 55, 30);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black");
context.fillStyle = gradient;
context.fillRect(30, 30, 50, 50);


Patterns 模式

即图像的重复模式 ,跟css一样 “repeat”, “repeat-x”, “repeat-y”, no-repeat”


var context = drawing.getContext("2d");
var image = document.images[0],
    pattern = context.createPattern(image, "repeat");
//draw a rectangle
context.fillStyle = pattern;  // 图像repeat模式仍然是从(0,0)开始的
context.fillRect(30, 0, 150, 150); // 这里的意思是绘制矩形,并让图像repeat模式在该矩形区域显示,并不是说 图片repeat是从绘制该矩形的起点开始的,渐变也是如此



Working with Image Data 图像原始数据

可以用来做滤镜效果,详细可看  www.html5rocks.com/en/tutorials/canvas/imagefilters/


Compositing 合成

两个图像之间如何纠缠的,这里举一个例子,其他雷同



两个图像之间如何纠缠的,这里举一个例子,其他雷同


var drawing = document.getElementById("drawing");
var context = drawing.getContext("2d");
//draw a red rectangle
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
//change the global alpha
context.globalCompositeOperation = "xor";
//draw a blue rectangle
context.fillStyle = "rgba(0,0,255,1)";
context.fillRect(30, 30, 50, 50);


总结


  1. canvas内容就是上面这些了,就好比设计师能用的颜色就那么多,但是将颜色,图形组合起来,创意真的是无限的,canvas也是如此。


  1. webGL是一个 对OpenGL ES 2.0浏览器实现接口,用于3D绘画,生产阶段最好不要用,可用于实验阶段。
目录
相关文章
|
10月前
|
SQL Java 数据库连接
springboot中配置mybatis别名该怎么写?
springboot中配置mybatis别名该怎么写?
|
10月前
|
小程序
微信小程序无法使用async await的问题
微信小程序无法使用async await的问题
214 0
|
10月前
|
消息中间件 分布式计算 算法
深入理解Zookeeper系列-3.Zookeeper实现原理及Leader选举源码分析(上)
深入理解Zookeeper系列-3.Zookeeper实现原理及Leader选举源码分析
759 0
|
4月前
|
前端开发 JavaScript API
如何使用 Canvas 实现复杂的动画效果?
【10月更文挑战第24天】使用Canvas实现复杂的动画效果,需要综合运用JavaScript、数学知识以及对Canvas API的深入理解。
188 2
|
10月前
|
Web App开发 编解码 前端开发
盘点10个基于 Canvas 的优秀开源项目!
盘点10个基于 Canvas 的优秀开源项目!
918 0
|
10月前
|
存储 SQL 缓存
openDatabase
openDatabase 是一种 Web SQL Database API,用于在浏览器本地存储数据库。它可以创建新的数据库或打开现有的数据库,并执行 SQL 查询和更新操作。openDatabase 方法是 HTML5 Web SQL Database API 的核心方法之一,可以在浏览器端实现本地存储和数据处理功能,而不需要依赖服务器端数据库。 使用 openDatabase 非
297 5
|
JSON 安全 数据格式
Flask 高级应用:使用蓝图模块化应用和 JWT 实现安全认证
本文将探讨 Flask 的两个高级特性:蓝图(Blueprints)和 JSON Web Token(JWT)认证。蓝图让我们可以将应用模块化,以便更好地组织代码;而 JWT 认证是现代 Web 应用中常见的一种安全机制。
|
Java Scala 开发者
ArrayBuffer 的基本使用 | 学习笔记
快速学习 ArrayBuffer 的基本使用
|
10月前
|
开发框架 JavaScript 前端开发
比较两个突出的node.js框架:koa和express
接上文讲述了 koa框架,这边文章比较一下这两个突出的node.js框架:koa和express
|
存储 机器学习/深度学习 人工智能
向量数据库:新一代的数据处理工具
向量数据库是一种特殊类型的数据库,它可以存储和处理向量数据。向量数据通常用于表示多维度的数据点,例如在机器学习和人工智能中使用的数据。在向量数据库中,数据被表示为向量,这些向量可以在多维空间中进行比较和搜索。这种数据库的一个关键特性是它能够快速地找到与给定向量最相似的其他向量,这是通过计算向量之间的距离(例如欧氏距离或余弦相似度)来实现的。
2278 0
向量数据库:新一代的数据处理工具