HTML5——Canvas画布的使用方法

最新推荐文章于 2024-05-14 10:20:04 发布

叶落無痕

最新推荐文章于 2024-05-14 10:20:04 发布

阅读量3.8k

点赞数 2

分类专栏： HTML5 学习笔记文章标签： html5 web前端 canvas

本文链接：https://blog.csdn.net/Jeason_liu/article/details/49138207

版权

HTML5 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

学习笔记

8 篇文章 0 订阅

订阅专栏

一、概述

作用——利用HTML5中提供的画布功能，通过Canvas实现各种图形。

注意：js事件不能绑定到画布中的图形上，只能为<canvas>元素绑定事件。

二、画布的使用

1、html页面中使用<canvas>定义画布

2、使用js获取canvas元素，并调用getContext("2d")方法得到画布对象

3、使用画布提供的API方法绘制图形

4、绘制图形的方法

绘制矩形：

fillRect（x,y,width,height）--绘制实心矩形

x和y--矩形左上角的坐标值

width和height--矩形的宽与高

strokeRect(x,y,width,height)--绘制空心矩形

属性含义同上

clearRect（x,y,width,height）--清除制定矩形区域

属性含义同上

小案例：

<!DOCTYPE HTML>
<html>
<head>
<title>如何使用Canvas</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="canv" style="background:red" width="400px" height="400px"></canvas>
</body>
<script>
var canvas=document.getElementById("canv");
var context=canvas.getContext("2d");
context.strokeRect(10,10,100,100);
context.fillRect(100,100,100,100);
context.clearRect(110,110,80,80);
</script>
</html>

绘制效果：

设置颜色：

fillStyle--设置填充颜色

strokeStyle--设置描边颜色

globalAlpha--设置透明度(0-1)

小案例：设置彩色矩形

<!DOCTYPE html>
<html>
<head>
<title>设置颜色</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="canvas" width="500px" height="500px" style="background:silver"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
// 1 设置填充颜色
context.fillStyle = "blue";
// 2 绘制实心矩形
context.fillRect(10,10,100,100);
context.strokeStyle = "red";
context.strokeRect(120,10,100,100);
context.fillStyle = "red";
context.globalAlpha = 0.2;
context.fillRect(230,10,100,100);
</script>
</body>
</html>

绘制效果：

设置渐变

线性渐变：createLinearGradient(x1,y1,x2,y2)

x1,y1 - 基准线的起点坐标值

x2,y2 - 基准线的终点坐标值

线性渐变根据基准线实现渐变效果

扇形渐变：createRadialGradient(x1,y1,r1,x2,y2,r2);

x1和y1 - 第一个圆的圆心坐标值
r1 - 第一个圆的半径
x2和y2 - 第二个圆的圆心的坐标值
r2 - 第二个圆的半径

扇形渐变根据基准圆实现扇形渐变

设置渐变：addColorStop(position,color)

position - 设置颜色的位置(0-1)

color - 设置的颜色

注意：该方法由渐变对象调用，而不是画布对象调用

线性渐变小案例：

<!DOCTYPE HTML>
<html>
<head>
<title>线性渐变</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas width="500px" height="500px" id="canvas"></canvas>
</body>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var grad=context.createLinearGradient(0,0,400,0);
//var grad=context.createLinearGradient(0,0,0,300);
//var grad=context.createLinearGradient(0,0,400,300);

grad.addColorStop(0,"blue");
grad.addColorStop(0.5,"green");
grad.addColorStop(1,"yellow");

context.fillStyle=grad;
context.fillRect(0,0,400,300);
</script>
</html>

三种运行效果分别为：

扇形渐变小案例：

<!DOCTYPE HTML>
<html>
<head>
<title>扇形渐变</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="canvas" width="400px" height="300px"></canvas>
</body>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var grad=context.createRadialGradient(200,0,100,200,300,100);
//var grad=context.createRadialGradient(0,0,30,200,300,100);

grad.addColorStop(0,"orange");
grad.addColorStop(1,"yellow");

context.fillStyle=grad;
context.fillRect(0,0,400,300);
</script>
</html>