JavaScript

超轻量级php框架startmvc

首页 JavaScript canvas知识总结

canvas知识总结

更新时间：2020-04-21 00:27:27 作者：startmvc
1.基础知识canvas元素绘制图像的时候有两种方法，分别是context.fill()//填充context.stroke()//绘制

1.基础知识

canvas元素绘制图像的时候有两种方法，分别是


 context.fill()//填充
 context.stroke()//绘制边框

style:在进行图形绘制前，要设置好绘图的样式


 context.fillStyle//填充的样式
 context.strokeStyle//边框样式
 context.lineWidth//图形边框宽度

context.arc(centerx圆心横左边,centery圆心纵坐标,radius半径,startingAngle起始弧度值,endingAngle结束弧度值,anticlockwise='false'顺时针默认false)

2.绘制非填充线段


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title></title>
 <link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css"> 
 <link rel="stylesheet" href="styles/lianxi.css">
 <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
 <script src="scripts/lianxi.js"></script>
 <!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
 <!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
 <style type="text/css">
 .canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
 </style>
 <script>
 window.onload=function(){
 function draw(){
 var canvas = document.getElementById('canvas');
 if (canvas.getContext){
 var ctx = canvas.getContext('2d');
 canvas.width=300;
 canvas.height=300;
 ctx.beginPath(); //一个绘画开始
 ctx.moveTo(50,50);//线段起点
 ctx.lineTo(100,100);//终点1
 ctx.lineTo(50,100);//终点2
 ctx.lineTo(50,50);//终点3
 ctx.lineWidth=5;//边框宽度
 ctx.strokeStyle="red"; //边框样式
 ctx.closePath(); //一个绘画结束
 ctx.stroke();//绘制线段
 }else{
 alert('当前浏览器不支持，请更换浏览器');
 }
 }
 draw();
 } 
 </script>
 <style tyrp="text/css">
 canvas{ border: 1px solid black;margin: 0 auto;display: block;}
 </style>
</head>
<body>
 <canvas id="canvas">当前浏览器不支持，请更换浏览器</canvas>
</body>
</html>

3.绘制填充图形


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title></title>
 <link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css"> 
 <link rel="stylesheet" href="styles/lianxi.css">
 <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
 <script src="scripts/lianxi.js"></script>
 <!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
 <!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
 <style type="text/css">
 .canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
 </style>
 <script>
window.onload=function(){
 function draw(){
 var canvas = document.getElementById('canvas');
 if (canvas.getContext){
 var ctx = canvas.getContext('2d');
 canvas.width=300;
 canvas.height=300;
 ctx.beginPath(); //一个绘画开始
 ctx.moveTo(50,50);//线段起点
 ctx.lineTo(100,100);//终点1
 ctx.lineTo(50,100);//终点2
 ctx.lineTo(50,50);//终点3
 ctx.fillStyle='red';
 ctx.fill();
 //边框添加
 ctx.lineWidth=5;//边框宽度
 ctx.strokeStyle="blue"; //边框样式
 ctx.closePath(); //一个绘画结束
 ctx.stroke();//绘制线段
 }else{
 alert('当前浏览器不支持，请更换浏览器');
 }
 }
 draw();
 } 
 </script>
 <style tyrp="text/css">
 canvas{ border: 1px solid black;margin: 0 auto;display: block;}
 </style>
</head>
<body>
 <canvas id="canvas">当前浏览器不支持，请更换浏览器</canvas>
</body>
</html>

4.绘制圆弧


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title></title>
 <link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css"> 
 <link rel="stylesheet" href="styles/lianxi.css">
 <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
 <script src="scripts/lianxi.js"></script>
 <!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
 <!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
 <style type="text/css">
 canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
 </style>
 <script>
 window.onload=function(){
 function draw(){
 var canvas = document.getElementById('canvas');
 if (canvas.getContext){
 var ctx = canvas.getContext('2d');
 canvas.width=800;
 canvas.height=800;
 ctx.beginPath(); //开始一个新的绘画
 ctx.lineWidth=5;//边框宽度
 ctx.strokeStyle="red"; //边框样式
 ctx.arc(100, 100, 30, 0, 1.5*Math.PI);
 ctx.closePath(); //一个绘画结束，如果绘画不是封闭的，就封闭起来
 ctx.stroke();//绘制线段
 ctx.beginPath(); //开始一个新的绘画
 ctx.lineWidth=5;//边框宽度
 ctx.strokeStyle="red"; //边框样式
 ctx.arc(200, 100, 30, 0, 2*Math.PI);
 ctx.closePath(); //一个绘画结束，如果绘画不是封闭的，就封闭起来
 ctx.stroke();//绘制线段

 ctx.beginPath(); //开始一个新的绘画
 ctx.lineWidth=5;//边框宽度
 ctx.strokeStyle="red"; //边框样式
 ctx.arc(300, 100, 30, 0, 0.5*Math.PI);
 ctx.closePath(); //一个绘画结束，如果绘画不是封闭的，就封闭起来
 ctx.stroke();//绘制线段
 ctx.beginPath(); //开始一个新的绘画
 ctx.lineWidth=5;//边框宽度
 ctx.strokeStyle="red"; //一个绘画结束，如果绘画不是封闭的，就封闭起来
 ctx.arc(400, 100, 30, 0, 0.5*Math.PI,true);//注意：0*PI，0.5*PI，1*PI，1。5*PI，2*PI所占据的位置是固定的
 ctx.closePath(); //一个绘画结束
 ctx.stroke();//绘制线段
 ctx.beginPath(); //开始一个新的绘画
 ctx.fillStyle="red"; //边框样式
 ctx.arc(500, 100, 30, 0, 1.5*Math.PI);
 ctx.closePath(); //一个绘画结束，如果绘画不是封闭的，就封闭起来
 ctx.fill();//绘制填充

 ctx.beginPath(); //开始一个新的绘画
 ctx.lineWidth=5;//边框宽度
 ctx.strokeStyle="red"; //边框样式
 ctx.arc(600, 100, 30, 0, 1.5*Math.PI);
 ctx.stroke();//绘制线段
 }else{
 alert('当前浏览器不支持，请更换浏览器');
 }
 }
 draw();
 }
 </script>
</head>
<body>
 <canvas id="canvas">当前浏览器不支持，请更换浏览器</canvas>
</body>
</html>

5.绘制矩形


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title></title>
 <link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css"> 
 <link rel="stylesheet" href="styles/lianxi.css">
 <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
 <script src="scripts/lianxi.js"></script>
 <!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
 <!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
 <style type="text/css">
 canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
 </style>
 <script>
 window.onload=function(){
 function draw(){
 var canvas = document.getElementById('canvas');
 if (canvas.getContext){
 var ctx = canvas.getContext('2d');
 canvas.width=500;
 canvas.height=500;
 ctx.fillRect(25,25,100,100);//绘制一个填充的矩形
 ctx.clearRect(45,45,60,60);//清除指定矩形区域，让清除部分完全透明
 ctx.strokeRect(50,50,50,50); //绘制一个矩形的边框
 }else{
 alert('当前浏览器不支持，请更换浏览器');
 }
 }
 draw();
 } 
 </script>
</head>
<body>
 <canvas id="canvas">当前浏览器不支持，请更换浏览器</canvas>
</body>
</html>

6.绘制文本


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title></title>
 <link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css"> 
 <link rel="stylesheet" href="styles/lianxi.css">
 <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
 <script src="scripts/lianxi.js"></script>
 <!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
 <!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
 <style type="text/css">
 canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
 </style>
 <script>
 window.onload=function(){
 function draw(){
 var canvas = document.getElementById('canvas');
 if (canvas.getContext){
 var ctx = canvas.getContext('2d');
 canvas.width=500;
 canvas.height=500;
 ctx.font = "48px serif";
 ctx.fillText("Hello world", 10, 50);
 }else{
 alert('当前浏览器不支持，请更换浏览器');
 }
 }
 draw();
 } 
 </script>
</head>
<body>
 <canvas id="canvas">当前浏览器不支持，请更换浏览器</canvas>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title></title>
 <link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css"> 
 <link rel="stylesheet" href="styles/lianxi.css">
 <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
 <script src="scripts/lianxi.js"></script>
 <!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
 <!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
 <style type="text/css">
 canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
 </style>
 <script>
 window.onload=function(){
 function draw(){
 var canvas = document.getElementById('canvas');
 if (canvas.getContext){
 var ctx = canvas.getContext('2d');
 canvas.width=500;
 canvas.height=500;
 ctx.font = "48px serif";
 ctx.strokeText("Hello world", 10, 50);
 }else{
 alert('当前浏览器不支持，请更换浏览器');
 }
 }
 draw();
 } 
 </script>
</head>
<body>
 <canvas id="canvas">当前浏览器不支持，请更换浏览器</canvas>
</body>
</html>

7.图片操作


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title></title>
 <link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css"> 
 <link rel="stylesheet" href="styles/lianxi.css">
 <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
 <script src="scripts/lianxi.js"></script>
 <!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
 <!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
 <style type="text/css">
 canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
 </style>
 <script>
 window.onload=function(){
 function draw(){
 var canvas = document.getElementById('canvas');
 if (canvas.getContext){
 var ctx = canvas.getContext('2d');
 canvas.width=500;
 canvas.height=500;
 var img=new Image();
img.src='http://gzdl.cooco.net.cn/files/down/test/imggzdl/312/15812.jpg'
 img.onload=function(){
 ctx.drawImage(img,0,0);
 ctx.beginPath();
 ctx.moveTo(30,96);
 ctx.lineTo(70,66);
 ctx.lineTo(103,76);
 ctx.lineTo(170,15);
 ctx.stroke();
 }
 }else{
 alert('当前浏览器不支持，请更换浏览器');
 }
 }
 draw();
 } 
 </script>
</head>
<body>
 <canvas id="canvas">当前浏览器不支持，请更换浏览器</canvas>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

canvas
文章分类
相关文章

js+canvas实现两张图片合并成一张图片的方法

JavaScript Canvas编写炫彩的网页时钟

原生js基于canvas实现一个简单的前端截图工具代码实例

vue canvas绘制矩形并解决由clearRec带来的闪屏问题

python tkinter canvas使用实例

微信小程序使用canvas自适应屏幕画海报并保存图片功能

js+HTML5 canvas 实现简单的加载条(进度条)功能示例

微信小程序如何使用canvas二维码保存至手机相册

微信小程序简单的canvas裁剪图片功能详解

小程序中canvas的drawImage方法参数使用详解

微信小程序利用Canvas绘制图片和竖排文字详解

在Vue中用canvas实现二维码和图片合成海报的方法

原生JS使用Canvas实现拖拽式绘图功能

JavaScript+HTML5 canvas实现放大镜效果完整示例

javascript+HTML5 canvas绘制时钟功能示例

微信小程序实现的canvas合成图片功能示例

微信小程序基于canvas渐变实现的彩虹效果示例

Vue使用Canvas绘制图片、矩形、线条、文字，下载图片

JS+canvas画布实现炫酷的旋转星空效果示例

Vue中使用canvas方法总结