HTML5 画布

最新推荐文章于 2022-09-04 16:17:06 发布

Gsding

最新推荐文章于 2022-09-04 16:17:06 发布

阅读量264

点赞数 2

分类专栏： JavaWeb 文章标签： html5

本文链接：https://blog.csdn.net/m0_57840282/article/details/120038520

版权

JavaWeb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

canvas 简介
canvas 基本元素
画布的建立
2D渲染上下文
绘制图案
图形小结
绘制文字
图像变换
- 保存与恢复
- 移动缩放旋转
图片导入到画布

canvas 简介

<canvas> 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单的动画，甚至可以进行实时视频处理和渲染。

canvas 基本元素

与img相似，但没有src 和 alt 属性。
在JS脚本中通过id寻找canvas元素，<canvas>标签要成对使用
width 和 height属性默认为 300xp 和 150xp。

画布的建立

<!DOCTYPE html>
<html>
<head>
    <meta charset="utd-8">
    <title>画布创建</title>
</head>    
<body>
    <!-- 画布宽300xp，高300xp，画框粗3px 实体 红色-->
    <canvas id = "Mycanvas" width = "300" height = "300" style = "border: 3px solid red"></canvas>
</body>
</html>

2D渲染上下文

<canvas>会创建一个固定大小的画布，会公开一个或多个渲染上下文(画笔)，使用渲染上下文来绘制和处理要展示的内容。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>帆布的使用</title>
</head>

<body>
    <canvas id="Mycanvas" width="500" height="500" style="border: 3px solid"></canvas>
</body>

<script type="text/javascript">
  var c = document.getElementById("Mycanvas");//获取canvas元素
  var ctx = c.getContext("2d");  //创建一个context对象 
    
</script>

</html>

绘制图案

ontext.beginPath()
开始组装一组新的路径命令，也丢弃任何先前组装的路径。
尽管是可选的，但不应该舍弃它。
context.closePath() 闭合路径，如果路径是闭合的，那么不起作用，closePath的意思不是结束路径，而是关闭路径，它会试图从（MoveTo点之后）当前路径的终点连一条路径到起点，让整个路径闭合起来。但是，这并不意味着它之后的路径就是新路径了！

绘制直线和三角形

moveTo(z,y)从(x,y)起笔，lineTo(x,y)从(x,y)落笔
context.strokeStyle()选择颜色
context.stroke()一次性描边

矩形

fillStyle填充色
fillRect(x1,y1,x2,y2) 绘制矩形
strokeStyle定义线的颜色
strokeRect(x1,y1,x2,y2) 绘制矩形框

圆和圆弧

context.arc(x,y,r,startAngle,endAngle,自选true OR false) true 为逆时针绘画，false 顺时针
fillStyle 填充色
fill()填充当前路径图像，默认黑色

代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>帆布的使用</title>
</head>

<body>
    <canvas id="Mycanvas" width="500" height="500" style="border: 3px solid"></canvas>
</body>

<script type="text/javascript">
  var c = document.getElementById("Mycanvas");//获取canvas元素
  var ctx = c.getContext("2d");  //创建一个context对象 
  
  //直线
  ctx.moveTo(0,0);// 笔的起点
  ctx.lineTo(250,250);//终点
  ctx.moveTo(250,250);
  ctx.lineTo(500,0);
  ctx.lineWidth = 5; // 线条宽度
  ctx.strokeStyle = "red"; 
  ctx.stroke(); // 一次性描边
 
  // strokeRect 矩形
  ctx.beginPath();
  ctx.fillStyle = "yellow";
  ctx.strokeStyle = "blue"; // reset矩形框颜色
  ctx.strokeRect(50, 20, 120, 100);// 矩形框
  ctx.closePath();
  ctx.fillStyle = "red";//先规定颜色
  ctx.fillRect(220, 20, 120, 100);// 矩形

  //圆和圆弧
  ctx.fillStyle = "blue";
  ctx.beginPath();
  ctx.arc(200,200,70,0,Math.PI/3,true);
  ctx.closePath();
  ctx.fill();//默认黑色-
  //圆弧
  for(var i = 0; i < 10; i ++){
      ctx.strokeStyle = "green";
      ctx.beginPath();
      ctx.arc(0,500,i*20,0,Math.PI/2,true);
      ctx.closePath();
      ctx.stroke();
   }
   
   // 黑边红色填充三角
   ctx.beginPath();
   ctx.strokeStyle = "black";
   ctx.moveTo(500,500);
   ctx.lineTo(400,500);
   ctx.lineTo(500,400);
   ctx.stroke();
   ctx.fillStyle = "red";
   ctx.fill();

</script>

</html>

图形小结

矩形的绘制方法

rect(x,y,w,h)创建一个矩形
strokeRect(x,y,w,hx,y,w,h) 绘制矩形（无填充）
fillRect(x,y,w,h) 绘制"被填充"的矩形
stroke() 绘制已定义的路径
fill()绘制一个实心的（带填充的图形）

Canvas的路径方法

moveTo() 定义绘制路径的起点(在直线中就是定义直线的起点)
lineTo() 添加一个新点，(在我们的直线案例中就是定义直线的终点，但是后边继续绘制的话，它就变成中间点)
stroke() 绘制已定义的路径
fill()绘制一个实心的（带填充的图形）
beginPath() 用来创建新的路径
closePath() 从当前点回到起始点的来封闭路径
arc(x,y,r,开始角度，结束角度，true/false) ：创建圆弧/曲线（用于创建圆形或部分圆）

绘制直线段流程:

在HTML5文档中添加canvas元素，并且设置的宽高和ID
在canvas元素中添加提示语句，让不支持canvas的浏览器能够显示友好的提示语句
添加script元素
获取画布/设置绘图绘图环境：此为固定语句，暂时记住、了解即可，后续课程还会继续讲解
指定线宽:lineWidth= 数值
指定颜色：strokeStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
设定起点：moveTo(x坐标,y坐标)
设定终点：lineTo(x坐标,y坐标)
开始绘制：stroke()

绘制矩形流程：

在HTML5文档中添加canvas元素，并且设置的宽高和ID
在canvas元素中添加提示语句，让不支持canvas的浏览器能够显示友好的提示语句
添加script元素
获取画布/设置绘图绘图环境：此为固定语句，暂时记住、了解即可，后续课程还会继续讲解
绘制空心矩形
指定线宽:lineWidth= 数值
指定轮廓颜色：strokeStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
设定矩形的基本参数：strokeRect(x,y;width,height)
绘制填充矩形
指定填充颜色：fillStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
设定矩形的基本参数：fillRect(x,y;width,height)

绘制圆

在HTML5文档中添加canvas元素，并且设置的宽高和ID
在canvas元素中添加提示语句
添加script元素
获取画布/设置绘图绘图环境
指定线宽:lineWidth= 数值
指定颜色：fill/strokeStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
设定圆的基本参数：
圆心的坐标:x,y
圆的半径：数值
起始弧度和终止弧度：角度值1，角度值2
绘制方向：true（逆时针）/false（顺时针）
开始绘制：stroke()/fill（）

绘制文字

绘制文字时可以主要使用filltext()方法或strokeText()方法。fillText()方法用填充方式绘制文本，strokeText()方法用轮廓方式绘制文本，这两个方法的格式定义如下。

 fillText(text,x,y,[maxwidth]);
 strokeText(text,x,y,[maxwidth]);

[maxwidth]自选

<!DOCTYPE html>
<html>
<head>
    <meta chasrset = "utf-8"/>
    <title>字体</title>
</head>
<body>
    <canvas id = "myCanvas" width = "500" height="500" style="border: 3px solid red"></canvas>
</body>
<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    // 绘制填充文字
    context.beginPath();
    context.font = "35px 黑体";
    context.fillStyle = "red";
    context.fillText("这是红色",50,50);
    context.closePath();
    // 绘制轮廓文字
    context.beginPath();
    context.font = "40px 楷体";
    context.strokeStyle = "blue";
    context.strokeText("这是蓝色", 200,100);
    context.closePath();
</script>
</html>

图像变换

保存与恢复

save()保存当前状态，入栈顶，restore()恢复状态，即pop出栈

<!DOCTYPE html>
<html>
<head>
    <meta chasrset = "utf-8"/>
    <title>字体</title>
</head>
<body>
    <canvas id = "myCanvas" width = "500" height="500" style="border: 3px solid red"></canvas>
</body>
<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.fillStyle = "red";
    context.fillRect(10,10,230,230);
    context.fill();
    context.save();
    context.fillStyle = "blue";
    context.fillRect(30,30,190,190);
    context.save();
    context.fillStyle="green";
    context.fillRect(50,50,150,150);
    context.restore();
    //context.beginPath();
    context.fillRect(70,70,110,110);
    context.restore();
    context.fillRect(90,90,80,80);
    context.fill();
</script>
</html>

移动缩放旋转

translate(dx,dy)dx dy 分别表示水平垂直迁移量
scale(sx,sy)sx sy 表示xy轴的缩小/放大量
rotate(angle)按照弧度顺时针旋转
transform(a,b,c,d,e,f)：
a 水平缩放绘图
b 水平倾斜绘图
c 垂直倾斜绘图
d 垂直缩放绘图
e 水平移动绘图
f 垂直移动绘图

图片导入到画布

后续再写

Gsding

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5 画布

文章目录canvas 简介canvas 基本元素画布的建立2D渲染上下文绘制图案绘制直线和三角形矩形圆和圆弧代码图形小结绘制文字图像变换保存与恢复移动canvas 简介<canvas> 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单的动画，甚至可以进行实时视频处理和渲染。canvas 基本元素与img相似，但没有src 和 alt 属性。在JS脚本中通过id寻找canvas元素，<canva
复制链接

扫一扫