首页/基礎知識庫

HTML5 canvas组件

 2023-09-10 阅读 18 评论 0

摘要：canvas简介 canvas标签是用来绘制图像的canvas本身没有绘画的能力，仅仅是图形的容器，相当于一块画板必须要使用脚本完成绘制：JS canvas绘画 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8

canvas简介

  • canvas标签是用来绘制图像的
  • canvas本身没有绘画的能力，仅仅是图形的容器，相当于一块画板
  • 必须要使用脚本完成绘制：JS

canvas绘画

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css">#canvas{border: 1px solid black;}</style>
</head>
<body><!-- 1、定义画板 --><canvas id="canvas" width="400" height="300"></canvas><script>// 2、获取画板var canvas = document.getElementById("canvas");///3、铺上画纸或画布，获取绘画环境var cv = canvas.getContext("2d");// 4、开启一条路径或重置当前路径，相当于抬笔，表示准备开始画cv.beginPath();// 5、指定路径(画笔)起点: 画布.moveTo(X坐标，Y坐标);cv.moveTo(50, 50);// 6、指定路径(画笔)到达位置: 画布.lineTo(X坐标，Y坐标);cv.lineTo(350, 50);// 7、绘制当前路径(画笔)，默认为黑色cv.stroke();</script>
</body>
</html>

画笔宽度和颜色

  • canvas.lineWidth = 数值;：定义画笔宽度(粗细)，值为数值类型，单位为像素
  • canvas.strokeStyle = “颜色值”：定义画笔(路径)颜色

多个到达点及开启多条路径

  • canvas.lineTo(X坐标， Y坐标);：定义一个新到达点，然后从上一个点到该点画一条线条
  • canvas.beginPath();：开启一条路径，或重置当前路径；相当于抬笔
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css">#canvas{border: 1px solid black;}</style>
</head>
<body><!-- 1、定义画板 --><canvas id="canvas" width="400" height="300"></canvas><script>var canvas = document.getElementById("canvas");var cv = canvas.getContext("2d");cv.beginPath();cv.lineWidth = 10;cv.strokeStyle = "red";cv.moveTo(20, 20);cv.lineTo(200, 100);cv.lineTo(380, 20);cv.stroke();// ------------------------------------------// 开始新的路径cv.beginPath();cv.lineWidth = 20;cv.strokeStyle = "green";cv.moveTo(20, 170);cv.lineTo(200, 250);cv.lineTo(380, 170);cv.stroke();</script>
</body>
</html>

闭合路径和填充路径

  • canvas.closePath();：闭合路径，从当前点到开始点的路径
  • canvas.fillStyle = “颜色值”;：定义填充颜色
  • canvas.fill();：填充当前路径，默认为黑色
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css">#canvas{border: 1px solid black;}</style>
</head>
<body><!-- 1、定义画板 --><canvas id="canvas" width="400" height="300"></canvas><script>var canvas = document.getElementById("canvas");var cv = canvas.getContext("2d");cv.beginPath();cv.lineWidth = 10;cv.strokeStyle = "red";cv.moveTo(20, 20);cv.lineTo(200, 100);cv.lineTo(380, 20);// 不能指定路径到达起点来关闭路径，不是正常的关闭路径// cv.lineTo(20, 20);// 创建闭合路径：从当前点到开始点的路径cv.closePath();// 绘制当前路径cv.stroke();// 定义填充颜色cv.fillStyle = "orange";// 填充当前路径，默认为黑色cv.fill();</script>
</body>
</html>

绘制贝塞尔曲线

  • canvas.quadraticCurveto(cpx, cpy, x, y);：二次贝塞尔曲线，只有一个控制点
  • canvas.bezierCurveto(cpx1, cpy1, cpx2, cpy2, x, y);：三次贝塞尔曲线，有两个控制点
  • cpx，cpy：控制点
  • x，y：到达点
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css">#canvas{border: 1px solid black;}</style>
</head>
<body><!-- 1、定义画板 --><canvas id="canvas" width="400" height="300"></canvas><script>var canvas = document.getElementById("canvas");var cv = canvas.getContext("2d");       cv.beginPath();cv.moveTo(10, 100); //贝塞尔曲线的起始点// 二次贝塞尔曲线：画布.quadraticCurveTo(cpx, cpy, x, y);// cpx,cpy:控制点// x,y:到达点// 只有一个控制点// cv.quadraticCurveTo(200, 300, 300, 100);// 三次贝塞尔曲线：画布.bezierCurveTo(cpx1, cpy2, cpx2, cpy2, x, y);// cpx,cpy:控制点// x,y:到达点// 有两个控制点cv.bezierCurveTo(150, 200, 280, 50, 390, 100);cv.stroke();</script>
</body>
</html>

画布宽高设置及生产图片

  • canvas：宽高应直接在头标签中设置，单位为像素，默认为宽300px，高为150px；在css中设置宽高，会把宽为300px，高为150px的画布进行拉伸，所以会变形
  • canvas：最终会生成一张图片，可以通过右键另存为图片；可以通过css来定义样式，但不会生成到图片中

绘制空心矩形

  • canvas.rect(左上角x坐标，左上角y坐标，矩形宽度，矩形高度)：创建矩形路径，需使用stroke()绘制当前路径

  • html5canvas输出、canvas.strokeRect(左上角x坐标，左上角y坐标，矩形宽度，矩形高度)：创建并绘制矩形路径

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css">#canvas{border: 1px solid black;}</style>
</head>
<body><canvas id="canvas"  width="400" height="300"></canvas><script>var canvas = document.getElementById("canvas");var cv = canvas.getContext("2d");       // 方法1；创建矩形路径，再绘制当前路径// 创建矩形路径：画布.rect(左上角x坐标，左上角y坐标，矩形宽度，矩形高度)// cv.rect(50, 50, 150, 100);// 绘制当前路径// cv.stroke();// 方法2：创建并绘制矩形路径// 创建矩形路径：画布.strokeRect(左上角x坐标，左上角y坐标，矩形宽度，矩形高度)cv.strokeRect(50, 50, 250, 100);</script>
</body>
</html>

绘制填充矩形及清空矩形像素

  • canvas.rect(左上角x坐标，左上角y坐标，矩形宽度，矩形高度)：创建矩形路径，需使用fill()填充当前路径
  • canvas.fillRect(左上角x坐标，左上角y坐标，矩形宽度，矩形高度);：创建并填充矩形路径
  • canvas.clearRect(左上角x坐标，左上角y坐标，矩形宽度，矩形高度);：清空给定矩形内的指定像素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css">#canvas{border: 1px solid black;}</style>
</head>
<body><canvas id="canvas"  width="400" height="300"></canvas><script>var canvas = document.getElementById("canvas");var cv = canvas.getContext("2d"); // 指定填充颜色cv.fillStyle = "red";// 方法1；创建矩形路径，再填充当前路径// 创建矩形路径：画布.rect(左上角x坐标，左上角y坐标，矩形宽度，矩形高度)// cv.rect(50, 50, 150, 100);// 填充当前路径，默认为黑色// cv.fill();// 方法2：创建并填充矩形路径// 创建矩形路径：画布.fillRect(左上角x坐标，左上角y坐标，矩形宽度，矩形高度)cv.fillRect(50, 50, 250, 100);// 清空给定矩形内的指定像素// 画布.clearRect(左上角x坐标，左上角y坐标，矩形宽度，矩形高度)cv.clearRect(100, 100, 50, 45);</script>
</body>
</html>

绘制圆形

  • canvas.arc(圆心x坐标，圆心y坐标，半径， 起始弧度，结束弧度， 绘制方向(可选));：创建圆形、圆弧路径，再使用stroke()绘制或使用fill()填充当前路径
  • 起始弧度：3点钟方向为0度
  • 绘制方向：可选，默认为false；false=顺时针，true=逆时针

角度和弧度换算

  • 圆周弧度 = 2π, 360度 = 2π弧度, 1度 = 2π/360 = π/180弧度
  • π在js中用Math.PI表示
  • 1角度 = Math.PI/180弧度
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css">#canvas{border: 1px solid black;}</style>
</head>
<body><canvas id="canvas"  width="400" height="300"></canvas><script>var canvas = document.getElementById("canvas");var cv = canvas.getContext("2d"); // 指定填充颜色cv.fillStyle = "#00ff00";cv.lineWidth = 5;// 创建圆形路径，再绘制或填充当前路径// 创建矩形路径：画布.arc(圆心x坐标，圆心y坐标，半径， 起始弧度，结束弧度， 绘制方向(可选));// 角度和弧度换算// 圆周弧度 = 2π, 360度 = 2π弧度, 1度 = 2π/360 = π/180弧度// π在js中用Math.PI表示// 1角度 = Math.PI/180弧度cv.arc(200, 150, 100, 0, 2*Math.PI);cv.stroke();cv.fill();</script>
</body>
</html>

绘制圆弧

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css">#canvas{border: 1px solid black;}</style>
</head>
<body><canvas id="canvas"  width="400" height="300"></canvas><script>var canvas = document.getElementById("canvas");var cv = canvas.getContext("2d"); cv.beginPath(); //x轴cv.moveTo(0, 150);cv.lineTo(400, 150);cv.stroke();cv.beginPath(); //y轴cv.moveTo(200, 0);cv.lineTo(200, 300);cv.stroke();// 绘制圆弧cv.beginPath();cv.arc(200, 150, 100, 0, 90*Math.PI/180, true);// cv.arc(200, 150, 100,-90*Math.PI/180, 0);cv.stroke();</script>
</body>
</html>

绘制扇形

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css">#canvas{border: 1px solid black;}</style>
</head>
<body><canvas id="canvas"  width="400" height="300"></canvas><script>var canvas = document.getElementById("canvas");var cv = canvas.getContext("2d"); cv.fillStyle = "#00ff00";cv.strokeStyle = "#ff0000";cv.beginPath(); //x轴cv.moveTo(0, 150);cv.lineTo(400, 150);cv.stroke();cv.beginPath(); //y轴cv.moveTo(200, 0);cv.lineTo(200, 300);cv.stroke();// 绘制闭合弧形// cv.beginPath();// cv.arc(200, 150, 100, 0, 90*Math.PI/180);// cv.closePath();// cv.stroke();// cv.fill();// 绘制扇形cv.beginPath();cv.moveTo(200, 150);cv.arc(200, 150, 100, 0, 90*Math.PI/180);cv.closePath();cv.stroke();cv.fill();</script>
</body>
</html>

写入文字

  • convas.font = “字体样式 字体粗细 字号/行高 字体系列”;：设置文本属性
  • 画布.fillText(“要写入的文字”, X坐标, Y坐标, 最大文本宽度(可选));：实心文字
  • convas.strokeText(“要写入的文字”, X坐标, Y坐标, 最大文本宽度(可选));：空心文字
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css">#canvas{border: 1px solid black;}</style>
</head>
<body><canvas id="canvas"  width="400" height="300"></canvas><script>var canvas = document.getElementById("canvas");var cv = canvas.getContext("2d"); cv.fillStyle = "#00ff00";cv.strokeStyle = "#ff0000";// 1、设置文本属性// 画布.font = "字体样式 字体粗细 字号/行高 字体系列";cv.font = "italic 700 50px/100px 宋体";// 2、写入文字// a、实心文字：画布.fillText("要写入的文字", X坐标, Y坐标, 最大文本宽度(可选));cv.fillText("苦涩2020", 50, 100);// b、空心文字：画布.strokeText("要写入的文字", X坐标, Y坐标, 最大文本宽度(可选));cv.strokeText("苦涩2020", 50, 200);</script>
</body>
</html>

绘制和定位图像

  • canvas.drawImage(图像对象，X坐标，Y坐标);：在画布上绘制和定位图像；为了保险，通常应让图像加载完成后，再执行写入画布
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css">#canvas{border: 1px solid black;}</style>
</head>
<body><canvas id="canvas"  width="400" height="300"></canvas><script>var canvas = document.getElementById("canvas");var cv = canvas.getContext("2d"); cv.fillStyle = "#00ff00";cv.strokeStyle = "#ff0000";// 1、创建图像资源var pt = new Image();pt.src = "./img/1.jpg";// 2、在画布上绘制和定位图像 画布.drawImage(图像对象，X坐标，Y坐标);//    为了保险，通常应让图像加载完成后，再执行写入画布pt.onload = function(){cv.drawImage(pt, 50, 50);};</script>
</body>
</html>

设置和剪切图像

  • convas.drawImage(图像对象，X坐标，Y坐标，图像宽度，图像高度);：在画布上绘制和定位图像，并设置图像尺寸
  • canvas.drawImage(图像对象，剪切图像X坐标，剪切图像Y坐标，剪切图像宽度，剪切图像高度，X坐标，Y坐标，图像宽度，图像高度);：在画布上绘制和定位剪切的部分图像，并设置图像尺寸
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css">#canvas{border: 1px solid black;}</style>
</head>
<body><canvas id="canvas"  width="400" height="300"></canvas><script>var canvas = document.getElementById("canvas");var cv = canvas.getContext("2d"); cv.fillStyle = "#00ff00";cv.strokeStyle = "#ff0000";// 1、创建图像资源var pt = new Image();pt.src = "./img/1.jpg";// 2、在画布上绘制和定位图像，并设置图像尺寸 //    画布.drawImage(图像对象，X坐标，Y坐标，图像宽度，图像高度);//    为了保险，通常应让图像加载完成后，再执行写入画布// pt.onload = function(){//     cv.drawImage(pt, 50, 50, 150, 200);// };// 3、在画布上绘制和定位剪切的部分图像，并设置图像尺寸 //    画布.drawImage(图像对象，剪切图像X坐标，剪切图像Y坐标，剪切图像宽度，剪切图像高度，X坐标，Y坐标，图像宽度，图像高度);//    为了保险，通常应让图像加载完成后，再执行写入画布pt.onload = function(){cv.drawImage(pt, 0, 200, 200, 100, 50, 50, 300, 150);};</script>
</body>
</html>

填充操作

  • canvas.createPattern(image, “repeat | repeat-x | repeat-y | no-repeat”);：在指定的方向上重复指定的元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css">#canvas{border: 1px solid black;}</style>
</head>
<body><canvas id="canvas"  width="400" height="300"></canvas><script>var canvas = document.getElementById("canvas");var cv = canvas.getContext("2d"); // 创建图像资源var Iamp = new Image();Iamp.src = "./img/1.jpg";// createPattern(): 在指定的方向内重复指定的元素// 语法：画布.createPattern(image, "repeat | repeat-x | repeat-y | no-repeat");Iamp.onload = function(){// 创建矩形路径cv.rect(0, 0, 200, 150);cv.fillStyle = cv.createPattern(Iamp, "repeat");cv.fill();}</script>
</body>
</html>

实战画板

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><!-- <link rel="stylesheet" href="./reset.css"> --><style type="text/css">*{margin: 0; padding: 0;}#box{width: 800px; height: 440px; margin: 50px auto; position: relative;}#zz{width: 800px; height: 400px; position: absolute; top: 0; left: 0;background-color: rgba(0, 0, 0, 0);display: none;}.huabi{height: 40px; vertical-align: middle;}.huabi li{height: 40px; float: left; margin-right: 20px;list-style-type:none;}.huabi li span{line-height: 40px; float: left; display: block; margin-right: 10px;}.huabi li input{width: 80px; height: 30px; float: left; display: block; }.huabi li p{width:80px; height:1px; float:left;background:#000000; margin: 10px 0 auto 10px;}.huabi li button{width: 70px; height: 33px; float: left; margin-right: 10px;}</style>
</head>
<body><div id="box"><!-- 定义画板 --><canvas id="canvas"  width="800" height="400" style="background-color:#999999"></canvas><div id="zz"></div><ul class="huabi"><li><span>画笔颜色</span><input type="color" id="cvColor" value="#000000"></li><li><span>画笔粗细</span><input type="range" id="cvRange" value="1" min="1" max="30"><p id="bi"></p></li><li><span>画布颜色</span><input type="color" id="bgColor" value="#999999"></li><li><button id="clear">清空画布</button><button id="eraser">橡皮擦</button></li></ul></div><script>// 获取画板，获取画布环境var canvas = document.getElementById("canvas");var cv = canvas.getContext("2d"); // 画板添加鼠标点击事件canvas.onmousedown = function(e){// 获取鼠标相对于画板内的位置var s_left = e.offsetX;var s_top = e.offsetY;// document.title = s_left + " | " + s_top;// 开启路径cv.beginPath();// 定义画笔开始位置;将鼠标点击的位置作为新画笔开始的位置cv.moveTo(s_left, s_top);// 画板内鼠标移动事件canvas.onmousemove = function(event){// 获取鼠标在画板内移动的位置var n_left = event.offsetX;var n_top = event.offsetY;document.title = n_left + " | " + n_top;// 把路径画到当前鼠标的位置cv.lineTo(n_left, n_top);// 开始绘画cv.stroke();};};// 鼠标松开事件，取消canvas上的鼠标移动事件canvas.onmouseup = function(){canvas.onmousemove = null;};// 改变画笔颜色document.getElementById("cvColor").onchange = function(){cv.strokeStyle = this.value;document.getElementById("bi").style.background = cv.strokeStyle;}// 改变画笔粗细document.getElementById("cvRange").onchange = function(){cv.lineWidth = this.value;document.getElementById("bi").style.height = this.value+"px";document.getElementById("bi").style.background = cv.strokeStyle;}// 改变画布颜色document.getElementById("bgColor").onchange = function(){canvas.style.backgroundColor = this.value;}// 清空绘画document.getElementById("clear").onclick = function(){cv.clearRect(0, 0, canvas.width, canvas.height);}// 橡皮擦功能var abc = 1;document.getElementById("eraser").onclick = function(){// 获取遮罩层var zz = document.getElementById("zz");// 1:橡皮擦功能if(abc == 1){// 把遮罩层显示出来zz.style.display = "block";// 文字修改成绘制this.innerText = "绘制";abc = 0;// 遮罩层添加鼠标点击事件zz.onmousedown = function(){// 画板内鼠标移动事件zz.onmousemove = function(event){// 获取鼠标在画板内移动的位置var m_left = event.offsetX;var m_top = event.offsetY;// document.title = m_left + " | " + m_top;// 清空画布上对应位置的像素var bi = document.getElementById("cvRange").value;console.log(bi);cv.clearRect(m_left, m_top, bi, bi);};};// 鼠标松开事件，取消遮罩层上的鼠标移动事件zz.onmouseup = function(){zz.onmousemove = null;};}else{// 隐藏遮罩层zz.style.display = "none";// 文字修改成绘制this.innerText = "橡皮擦";abc = 1;}; };</script>
</body>
</html>

版权声明：本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接：https://hbdhgg.com/5/39712.html

上一篇：Git 项目搭建
下一篇：基于jQuery实现垂直轮播效果
标签：html5canvas输出canvas组件canvas框架canvas加入csshtml2canvas文档html5canvas叠加canvas插件html canvas 绘图
html5canvas输出

发表评论:

最新文章
阅读排行
猜你喜欢
热门标签

本站为非赢利网站，部分文章来源或改编自互联网及其他公众平台，主要目的在于分享信息，版权归原作者所有，内容仅供读者参考，如有侵权请联系我们删除！

Copyright © 2022 匯編語言學習筆記 Inc. 保留所有权利。

底部版权信息