HTML5--------canvas画布

最新推荐文章于 2024-08-05 22:52:23 发布

程序员的客栈

最新推荐文章于 2024-08-05 22:52:23 发布

阅读量952

点赞数 20

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/cmHuney/article/details/135917464

版权

1.基础内容：

1.定义：<canvas> 标签定义图形，用于图形的绘制，比如图表和其他图像，必须使用脚本(JavaScript)来绘制图形。

2.用途：可以在Canvas上画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。

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

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

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

②注意: 标签通常需要指定一个id属性， width 和 height 属性定义的画布的大小。

③可以在HTML页面中使用多个 <canvas> 元素.

使用 style 属性来添加边框:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>

2.绘制图像：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body >
	<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
	<script>
    	var c=document.getElementById("myCanvas");//找到 <canvas> 元素
        var ctx=c.getContext("2d");//创建 context 对象,getContext("2d")对象是内建的HTML5 
                                   对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
        ctx.fillStyle="#FF0000";//设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默 
                                  认设置是#000000（黑色）。
        ctx.fillRect(0,0,150,75);//fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
	</script>
</body>
</html>

结果展示：

ctx.fillRect(0,0,150,75);

canvas 是一个二维网格，canvas 的左上角坐标为 (0,0)，fillRect 方法拥有参数 (0,0,150,75)。

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

3.路径：

（1）在Canvas上画线，有两种方法：

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body >
	<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
	<script>
      var c=document.getElementById("myCanvas");
      var ctx=c.getContext("2d");
      ctx.moveTo(0,0);
      ctx.lineTo(200,100);
      ctx.stroke();
	</script>
</body>
</html>

结果展示：

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

4.绘制圆形：

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body >
	<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></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>

结果展示：

5.文本：

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

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

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

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

结果展示：

6.渐变：

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

有两种方式来设置Canvas渐变：

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

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

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

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

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
 
// 填充渐变
ctx.fillStyle=grd;//设置fillStyle的值为渐变
ctx.fillRect(10,10,150,80);//绘制图形

结果展示：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
// 创建渐变
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);

结果展示：

7.图像：

把一幅图像放置到画布上, 使用以下方法:

drawImage(image,x,y)

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<p>Image to use:</p>
<img id="scream" src="images/1.jpg"  width="200" height="100">

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

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");

img.onload = function() {
	ctx.drawImage(img,10,10);
} 
</script>

</body>
</html>

结果展示：

8.其他：

ctx.fillRect(x,y,w,h)：填充矩形
ctx.strokeRect(x,y,w,h)：带边框的矩形

ctx.clearRect(0,0,width,height)：清除整个画布
注意原点的位置
ctx.fillStyle：填充形状的样式
ctx.strokeStyle：描边的样式
ctx.lineWidth：线的宽度
ctx.lineCap：线帽
ctx.moveTo(x;y)：将画笔抬起点到x，y处
ctx.lineTo(x,y)：将画笔移到x，y处
ctx.rect(x,y,w,h)
ctx.arc(x,y,blur,star,end,boolean)//圆
ctx.arcTo(x1,y1,x2,y2,r)：2个坐标，一个半径
ctx.beginpath()：开始新路径
ctx.closepath()：闭合路径
ctx.save()
将画布保存当前状态
ctx.restore()
返回上一级状态
ctx.translate(x,y):将原点按当前坐标轴位移x，y个单位文本垂直居中
ctx.textBaseline = 'middle'; // top / bottom
文本水平居中
ctx.textAlign ='center'; // left // right