canvas详细介绍(canvas不懂?看这篇文章就够了)

在前端工作中,canvas是比较重要的一部分,但是很多人入门的人都对其一知半解。阅读本篇文章,带你入门canvas。

定义

<canvas> 标签定义图形,比如图表和其他图像,但必须使用脚本来绘制图形。在画布上(Canvas)可以画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字。

首先创建一个简单的画布

html部分

<canvas></canvas>

style部分

* {
margin: 0px;
padding: 0px;
}
#canvas {
border: 1px solid pink;
}

js部分

let canvas = document.getElementId('canvas');
// 创建context对象
// getContext('2d')对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
let ctx = canvas.getContext('2d');
// 绘制一个坐标为(10, 20)宽为100,高为100的红色矩形
// fillRect(x, y, width, height)
ctx.fillStyle = '#f00';
ctx.fillRect(10, 20, 100, 100);

这样一个简单的画布就绘制好了。

在日常中,仅仅这样是不够的,下面介绍一些常用的方法:

画线

修改js部分

let canvas = document.getElementId('canvas');
let ctx = canvas.getContext('2d');
// 从坐标(0, 0)到坐标(200, 200)的直线,使用stroke()方法来绘制
ctx.moveTo(0, 0);
ctx.lineTo(200, 200);
ctx.stroke();

绘制圆形,使用arc(x, y, r, start, stop)

修改js部分

let canvas = document.getElementId('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(80, 80, 30, 0, 2*Math.PI);
ctx.stroke();

文本

使用canvas文本功能,可以绘制一些好看的字体,比如空心文字,文字渐变等等

修改js部分

let canvas = document.getElementId('canvas');
let ctx = canvas.getContext('2d');
// font 定义字体大小,字体
ctx.font = '30px Arial';
// fillText(text, x, y) 定义实心的文本
// strokeText(text, x, y) 定义空心的文本
ctx.fillText('Hello, world!!!', 10, 10);
ctx.strokeText('Hello, world!!!', 10, 10);

渐变

修改js部分

let canvas = document.getElementId('canvas');
let ctx = canvas.getContext('2d');
// createLinearGradient(x,y,x1,y1)  创建线条渐变
// createRadialGradient(x,y,r,x1,y1,r1)  创建一个径向/圆渐变
let grd = ctx.createLinearGradient(0,0,200,0);
let grd = ctx.createLinearGradient(75,50,5,90,60,100);
grd.addColorStop(0, 'red');
grd.addColorStop(1, 'white');
ctx.fillStyle = grd;
ctx.fillRect(10, 20, 150, 75);

加载图像,使用drawImage(img, x, y)加载图片

修改html部分

<img src="./sheep.jpg"/>
<canvas width="200" height="200"></canvas>

修改js部分

let canvas = document.getElementId('canvas');
let ctx = canvas.getContext('2d');
let img = document.getElementId('sheep');
img.onload = function() {
ctx.drawImage(img, 10 , 10);
}

看到这里,应该对canvas有了一个基本的认识。

学好canvas,需要翻阅很多资料,不断实践。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至QQ邮箱:3628405936@qq.com 举报,本站将立刻删除。
(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注