周记（8.9~15）

最新推荐文章于 2023-01-15 10:03:56 发布

小周凉茶

最新推荐文章于 2023-01-15 10:03:56 发布

阅读量120

点赞数 2

分类专栏：周记

本文链接：https://blog.csdn.net/qq_51893876/article/details/119732251

版权

周记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

canvas

任务：

学习canvas
写一个demo
巩固之前学习的前端及C语言知识

canvas

canvas 是HTML5 标签，表示画布，作为图像绘制的容器。canvas 元素本身是没有绘图能力的，所有的绘制工作必须在脚本如JavaScript 内部完成
画布是一个矩形区域，可以控制其每一像素。
像所有的dom对象一样Canvas 对象有自己本身的属性、方法和事件。

canvas属性

width：画布的宽度，默认值为300
height：画布的高度，默认值为150
默认情况下元素没有边框和内容

如下，创建一个canvas元素：

<canvas id="myCanvas" width="200" height="100"></canvas>
//标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.

注意： canvas的宽度与高度，只能通过行间属性或者js动态修改，不要通过样式去修改，否则获取到的宽度与高度不准

canvas使用

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成，如：

var myCanvas=document.getElementById("myCanvas");
var ctx=myCanvas.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

getContext：画布获取方法

参数：contextID：画布上绘制的类型，当前唯一的合法值是 “2d”
返回值：一个 CanvasRenderingContext2D 对象，使用它可以绘制到 Canvas 元素中

要使用canvas,一般都需要进行以下3步操作：

获取canvas对象( 通过选择器选择canvas元素 )
通过canvas获取他的上下文绘制环境( context )
结合javascript调用canvas的api进行图形绘制

Canvas坐标

canvas 是一个二维网格。
canvas 的左上角坐标为 (0,0)
fillRect(x, y, width, height)：绘制一个填充的矩形
strokeRect(x, y, width, height)：绘制一个矩形的边框
clearRect(x, y, width, height)：清除指定矩形区域，让清除部分完全透明。
例：

	ctx.fillRect(0,0,150,75); 
	//在画布从左上角 (0,0)开始，绘制 150x75 的矩形。

Canvas路径

在Canvas上画线，我们将使用以下两种方法：
moveTo(x,y)：定义线条开始坐标
lineTo(x,y)：定义线条结束坐标
例：

var myCanvas=document.getElementById("myCanvas");
var ctx=myCanvas.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
//定义开始坐标(0,0), 和结束坐标 (200,100)。然后使用 stroke() 方法来绘制线条

在canvas中绘制圆形, 使用方法：arc(x,y,r,start,stop)
例：

var myCanvas=document.getElementById("myCanvas");
var ctx=myCanvas.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);	//定义圆心坐标(95,50),半径40px,角度从0到2π
ctx.stroke();

Canvas文本

使用 canvas 绘制文本，重要的属性和方法如下：
font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
例：

var myCanvas=document.getElementById("myCanvas");
var ctx=myCanvas.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
//使用 “Arial” 字体在画布上绘制一个高 30px 的实心文字

使用 strokeText():（空心)

var myCanvas=document.getElementById("myCanvas");
var ctx=myCanvas.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

Canvas渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。以下有两种不同的方式来设置Canvas渐变：
createLinearGradient(x,y,x1,y1)：创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1)：创建一个径向/圆渐变
使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用渐变时，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。例：

var myCanvas=document.getElementById("myCanvas");
var ctx=myCanvas.getContext("2d");

//创建一个线性渐变。使用渐变填充矩形:
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

//创建一个径向/圆渐变。使用渐变填充矩形：
// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

Canvas图像

把一幅图像放置到画布上, 使用方法：drawImage(image,x,y)

<!DOCTYPE html>
<html>
<body>

<p>要使用的图像：</p>
<img id="tulip" src="https://tse2-mm.cn.bing.net/th/id/OIP-C.FAGA4x7ZoM9O9tnYUpwZHwHaE8?pid=ImgDet&rs=1" alt="The Tulip" />
<p>画布：</p>
<canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;background:#ffffff;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	var img=document.getElementById("tulip");
	ctx.drawImage(img,10,10);
</script>
</body>
</html>

Canvas API

主要Canvas API有：
绘制图像： drawImage()
获取图像数据： getImageData()
重写图像数据： putImageData()
导出图像： toDataURL()

drawImage()
用于将图像绘制到Canvas画布当中，具体用法有三种：
context.drawImage(img,x,y)：在画布上定位图像
context.drawImage(img,x,y,width,height)：在画布上定位图像，并规定图像的宽度和高度
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)：剪切图像，并在画布上定位被剪切的部分。

img 规定要使用的图像、画布或视频。
sx 可选。开始剪切的 x 坐标位置。
sy 可选。开始剪切的 y 坐标位置。
swidth 可选。被剪切图像的宽度。
sheight 可选。被剪切图像的高度。
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y坐标位置。
width 可选。要使用的图像的宽度。（伸展或缩小图像）
height 可选。要使用的图像的高度。（伸展或缩小图像）

getImageData()
该方法用于从Canvas画布中获取图像数据，具体用法如下：
var ImageData = context.getImageData(x,y,width,height)：获取画布指定矩形范围内的像素数据

x 开始复制的左上角位置的 x 坐标。
y 开始复制的左上角位置的 y 坐标。
width 将要复制的矩形区域的宽度。
height将要复制的矩形区域的高度。

getImageData()方法会返回一个ImageData对象，该对象有三个属性分别为：width、height和data，而我们最主要用到的就是这个data数组，因为它保存着图像中每一个像素的数据。有了这些数据之后我们便可以对它们进行处理，最后再将其重写至Canvas画布中，这样就实现了对图片的处理转换。
data是一个数组，保存着图像中每一个像素的数据。
在data数组中，每一个像素用4个元素来保存，分别表示red、green、blue、透明度。

//第一个像素如下
var data = imageData.data;
var red = data[0];
var green = data[1];
var blue = data[2];
var alpha = data[3];

数组中每个元素的值是在0-255之间，能够直接访问到原始图像数据，就能够以各种方式来操作这些数据

注意：图像中有多少像素，data的长度就等于像素个数乘以4

putImageData()
将图像数据重写至Canvas画布中,起到覆盖canvas中原图像的作用，具体用法如下：
context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight)

imgData 规定要放回画布的 ImageData 对象。
x ImageData 对象左上角的 x 坐标，以像素计。
y ImageData 对象左上角的 y 坐标，以像素计。
dirtyX 可选。水平值（x），以像素计，在画布上放置图像的位置。
dirtyY 可选。水平值（y），以像素计，在画布上放置图像的位置。
dirtyWidth 可选。在画布上绘制图像所使用的宽度。
dirtyHeight 可选。在画布上绘制图像所使用的高度。

toDataURL()
这个方法与以上三种方法不同，它是Canvas对象的方法，该方法返回的是一个包含data URI的字符串，该字符串可直接作为图片路径地址填入<img>标签的src属性当中，具体用法如下：var dataURL = canvas.toDataURL(type, encoderOptions);

type 可选。图片格式，默认为 image/png。
encoderOptions 可选。在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。

小周凉茶

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
周记（8.9~15）

文章目录canvascanvas属性canvas使用Canvas坐标Canvas路径Canvas文本Canvas渐变Canvas图像Canvas API任务：学习canvas写一个demo巩固之前学习的前端及C语言知识canvascanvas 是HTML5 标签，表示画布，作为图像绘制的容器。canvas 元素本身是没有绘图能力的，所有的绘制工作必须在脚本如JavaScript 内部完成画布是一个矩形区域，可以控制其每一像素。像所有的dom对象一样Canvas 对象有自己本身的属性、
复制链接

扫一扫