canvas知识总结
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="/upload/otherpica42/77539.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="/upload/otherpica42/77539.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="/upload/otherpica42/77539.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="/upload/otherpica42/77539.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="/upload/otherpica42/77539.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="/upload/otherpica42/77539.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="/upload/otherpica42/77539.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='/upload/otherpica42/77540.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知识总结
路径分享：https://www.cdcxhl.com/article42/iidoec.html
成都网站建设公司_创新互联，为您提供网页设计公司、服务器托管、、网站排名、云服务器、网站建设
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联
- 美国云服务器和香港云服务器哪个好？香港和美国vps哪个更好呢？ 2022-10-04
- 高防云服务器租用多少钱？高防服务器租用需要注意哪些问题？ 2022-10-03
- 云服务器适合哪些公司 2021-02-21
- 云服务器：云服务器工作原理 2016-11-14
- 云服务器有什么用 2022-10-07
- 服务器之家浅谈独立服务器与云服务器哪个好用？ 2022-10-03
- 云服务器与VPS的区别？ 2022-06-21
- 选购云服务器后，可以用来干什么? 2021-02-27
- 云服务器能不能够免费试用？ 2022-10-03
- 一台云服务器可以存放多少个网站？ 2022-10-09
- 空间，轻云服务器，云主机三者的区别 2021-05-09
- 企业网站建设为什么要选择云服务器，原因是什么？ 2022-04-22