canvas 学习

最新推荐文章于 2024-08-05 16:35:45 发布
最新推荐文章于 2024-08-05 16:35:45 发布
阅读量824 收藏 3
点赞数
分类专栏： 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22182989/article/details/89705545
版权

什么是 canvas?

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

 

有什么用？

HTML5 Canvas

<canvas> 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。

在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。

 

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。

注释：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。

 

创建一个画布（Canvas）

一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制.

注意: 默认情况下 <canvas> 元素没有边框和内容。

<canvas>简单实例如下:

<canvas id="myCanvas" width="200" height="100"></canvas>

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.

提示:你可以在HTML页面中使用多个 <canvas> 元素.

使用 style 属性来添加边框:

<style>
        canvas{
            border: 1px solid #ccc;
            /*不建议在 样式设置尺寸*/
            /*width: 600px;
            height: 400px;*/
        }
    </style>

--------------------- 

<!--1.准备画布-->
<!--1.1 画布是白色的 而且默认300*150-->
<!--1.2 设置画布的大小  width="600" height="400" -->
<canvas width="600" height="400" ></canvas>
<!--2.准备绘制工具-->
<!--3.利用工具绘图-->
<script>
    /*1.获取元素*/
    var myCanvas = document.querySelector('canvas');
    /*2.获取上下文 绘制工具箱 */
    /*是否有3d效果？ canvas暂时没有3d，有的话，也只是视觉效果*/
    var ctx = myCanvas.getContext('2d'); /*web gl 绘制3d效果的网页技术*/
    
</script>

或者 设置一个id： canvas id="myCanvas"

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script type="text/javascript">

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);

</script>

使用 JavaScript 来绘制图像

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

<script>
/*首先，找到 <canvas> 元素:*/
var c=document.getElementById("myCanvas");
/*然后，创建 context 对象：*/
var ctx=c.getContext("2d");/*getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。*/
/*下面的两行代码绘制一个红色的矩形：*/
ctx.fillStyle="#FF0000";/*设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。*/
ctx.fillRect(0,0,150,75);/*fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。*/
/**
JavaScript 语法：
context.fillRect(x,y,width,height);
JavaScript 语法：
context.fillRect(矩形左上角的 x 坐标,矩形左上角的 y 坐标,矩形的宽度，以像素计,矩形的高度，以像素计);
*/

</script>

</body>
</html>

 

Canvas 坐标

canvas 是一个二维网格。

canvas 的左上角坐标为 (0,0)

上面的 fillRect 方法拥有参数 (0,0,150,75)。

意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

坐标实例

如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。鼠标移动的矩形框上，显示定位坐标。

 

Canvas - 路径

在Canvas上画线，我们将使用以下两种方法：

  • moveTo(x,y) 定义线条开始坐标
  • lineTo(x,y) 定义线条结束坐标

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

实例

定义开始坐标(0,0), 和结束坐标 (200,100)。然后使用 stroke() 方法来绘制线条:

实例1：绘制一条斜线

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);/*开始点的x和y坐标*/
ctx.lineTo(200,100);/*结束点*/
ctx.stroke();/*stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。*/

</script>

</body>
</html>

效果：

实例2：绘制一条路径，形状是绿色的字母 L：

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.strokeStyle="green";
ctx.stroke();

</script> 

</body>
</html>

效果：

在canvas中绘制圆形：

arc(x,y,r,start,stop)

实际上我们在绘制圆形时使用了 "ink" 的方法, 比如 stroke() 或者 fill().

实例1：使用 arc() 方法 绘制一个圆:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

</script> 

</body>
</html>

效果：

 

实例2：用canvas画一个红的实心圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
    <script type="text/javascript">

        var c=document.getElementById("myCanvas");

        var ctx=c.getContext("2d");

        ctx.beginPath();

        ctx.arc(100,50,40,0,2*Math.PI);

        ctx.fillStyle="red";

        ctx.fill();

        ctx.stroke();

    </script>
</body>



</html>

效果：

 

在canvas中绘制矩形：

fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。

实例1：定义用蓝色填充的矩形：

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);

</script>

</body>
</html>

效果：

 

实例2：定义从上到下的渐变，作为矩形的填充样式：

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

</script>

</body>
</html>

效果：

 

实例3：定义从左到右的渐变，作为矩形的填充样式：

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

</script>

</body>
</html>

效果：

实例4：定义从黑到红到白的的渐变，作为矩形的填充样式：

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(0.5,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);

</script>

</body>
</html>

效果：

实例5：使用图像来填充绘图：

<!DOCTYPE html>
<html>
<body>

<p>要用到的图片：</p>
<img src="/i/lamp.gif" id="lamp" />
<!--<img src="http://www.w3school.com.cn/i/lamp.gif" id="lamp" />-->

<p>Canvas:</p>

<button onclick="draw('repeat')">Repeat</button> 
<button onclick="draw('repeat-x')">Repeat-x</button> 
<button onclick="draw('repeat-y')">Repeat-y</button> 
<button onclick="draw('no-repeat')">No-repeat</button>     

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script type="text/javascript">
function draw(direction)
{
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.clearRect(0,0,c.width,c.height); 
var img=document.getElementById("lamp")
var pat=ctx.createPattern(img,direction);
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();
}
</script>

</body>
</html>

效果：

使用画图环境的矩形绘制函数来绘制矩形。

 

  • fillRect(x,y,width,height) ： 绘制一个实心的矩形。
  • strokeRect(x,y,width,height) ： 绘制一个空心的矩形。
  • clearRect(x,y,width,height) ： 清除指定的矩形区域。使之全然透明。

实例6：绘制 150*100 像素的已填充矩形：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(20,20,150,100);

实例7：绘制 150*100 像素的空矩形：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(20,20,150,100);

实例8：在给定矩形内清空一个矩形：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(0,0,300,150);
ctx.clearRect(20,20,100,50);

实例9：绘制一个带阴影的矩形


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');
    ctx.fillStyle='red'; //设置矩形的填充颜色
    ctx.shadowBlur=20;  //设置阴影的模糊级别
    ctx.shadowColor='black'; //设置阴影的颜色
    ctx.fillRect(50,50,100,100);

</script>
</body>
</html>

 

效果：

Canvas - 文本

使用 canvas 绘制文本，重要的属性和方法如下：

  • font - 定义字体
  • fillText(text,x,y) - 在 canvas 上绘制实心的文本
  • strokeText(text,x,y) - 在 canvas 上绘制空心的文本

 

实例1：使用 fillText():使用 "Arial" 字体在画布上绘制一个高 30px 的文字（实心）：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>

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

</script>

</body>
</html>

效果：

实例2：使用 strokeText():使用 "Arial" 字体在画布上绘制一个高 30px 的文字（空心）：

 

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>

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

</script>

</body>
</html>

效果：

Canvas - 渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

以下有两种不同的方式来设置Canvas渐变：

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

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

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

使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。

实例1：使用 createLinearGradient():创建一个线性渐变。使用渐变填充矩形:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>

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

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

</script>

</body>
</html>

效果：

 

实例2：使用 createRadialGradient():创建一个径向/圆渐变。使用渐变填充矩形：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>

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

// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

</script>

</body>
</html>

效果：

 

 

 

 

 

 

 

南北极之间
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
canvas学习
in_uneventful的博客
06-11 289
Canvas <canvas> canvas元素一般有两个标签，width与height虽然说是可选的，当时如果不选择就默认为300像素与150像素显示（也可以使用css来定义大小，但是会出现画面比例与初始画布不一致从而导致的扭曲问题） 且元素本身有与普通图像一样的margin，border，background等属性 <canvas> 中间可以写一些当canvas无法使用时的替代标签 </canvas> 获取渲染上下文以及绘画功能（getContext） let ca
canvas的学习方法，学习曲线
weixin_34249367的博客
05-21 154
还记得在过去的Web前端开发中，如果你需要绘图或者生成相关图形的话，使用Flash可能是你唯一或者说最强大的实现方式，而在近些年的技术热点HTML5标准中，HTML Canvas（画布）能够更加方便的帮助你实现2D绘制图形图像及其各种动画效果功能。首先我们先来了解一下什么是HTML Canvas？我们可以在HTML中使用属性width和height来定义Canvas。但是实现Canvas的相关功能...
canvas初学笔记（万字详细版）
最新发布
懒羊羊大王的博客
08-05 892
canvas初学笔记，万字超详细版（附带实战源码）
canvas学习和滤镜实现代码
12-14
【canvas学习和滤镜实现代码】 在当前的数字化时代，摄影成为了日常生活的重要组成部分，而为了达到理想中的美照效果，美颜滤镜扮演了关键角色。这些滤镜通过特定的算法改变图像像素，创造出各种视觉特效。...
HTML Canvas 学习过程中的一些代码.zip
12-30
HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码 HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码 HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码 ...
canvas学习.zip
06-21
由于标题为"canvas学习.zip"，并且描述提到了"canvas的官网小例子"，我们可以从中了解到这个压缩包可能包含了一些用于学习`canvas`的实例代码。 `canvas`标签是一个内联元素，通过JavaScript API与之交互。在HTML中...
Canvas学习
qq_59974532的博客
05-03 255
Canvas在低版本的IE浏览器不兼容，需要提示用户 Canvas可以当作一个有特殊功能的DIV盒子 需要设置宽高，他是一个行内元素，需要加上display:block; Canvas只能使用原生JS ,JQurey不生效 Canvas 画直线的步骤： 1、需要获取到Canvas画布 : var Canvas = document.getElementById('canvas'); 2、得到画布的上下文: var c = canvas.getContext('2d'); 3、定义一条路径 c.b
学习Canvas技术
小罗的博客
05-17 1010
一、什么是canvas 　　<canvas>标签是 HTML5 中的新标签，像所有的 dom 对象一样它有自己本身的属性、方法和事件。操作canvas的javascript API，它可以实现在网页中完成动态的2D与3D图像技术。 <canvas> 标记和 SVG以及 VML 之间的一个重要的不同是，<canvas> 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容易编辑与生成，但功能明显要弱
Canvas自主学习
nbsl_的博客
05-06 974
Canvas学习 一、初识canvas 1.1什么是canvsa HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 1.2canvas的基本使用 页面上使用canvas标签 设置宽高属性 <canvas width="500px" height="500px"> 你的浏览器版本太低，请使用高版本浏览器 </canvas>
canvas的学习第一篇
qq_44788119的博客
06-17 265
1:创建一个canvas画布 < canvas id=“myCanvas” width=“200” height=“100”></ canvas> 2:获取绘图的上下文 var c = document.getElementById(“myCanvas”); var t=c.getContext(“2d”); 3:body中插入一个图片 <!DOCTYPE html> <html lang="en"> <head> <meta cha
Canvas学习：Canvas入门准备
wulixiaoxiao1的博客
03-18 1892
由于工作的需要，最近开始在学习HTML5的canvas相关的知识。这里主要记录自己学习canvas相关的知识笔记。如果文章有不对之处，还请大婶们多多指正。 今天这篇文章是学习canvas的一些准备工作。 canvas元素 也是HTML中的一个元素，可以给这个元素添加一些HTML属性，比如使用width和height来控制其大小，也可以通过style给它设置一些基本样式。同样也可以它添加id名
学习Canvas(canvas学习四)
这个博客记录我的成长。(专注前端开发，ehcarts图表开发，接定制)，有需要请站内私信。
06-04 322
学习canvas，画一个笑脸。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...
HTML5 Canvas学习笔记：绘制图像与应用场景
"canvas笔记 资源 个人学习" HTML5中的`canvas`标签是一个强大的图形绘制工具，它为Web开发者提供了在浏览器中进行动态图形编程的能力。`canvas`这个名字来源于实际绘画中使用的画布，它是一个矩形区域，允许通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南北极之间

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值