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.绘制非填充线段
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="utf-8">
<title></title>
<linkrel="stylesheet"href="http://r01.uzaicdn.com/content/v1/styles/subject.css">
<linkrel="stylesheet"href="styles/lianxi.css">
<scriptsrc="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
<scriptsrc="scripts/lianxi.js"></script>
<!--[ifltIE9]><scriptsrc="https://r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
<!--[ifIE6]><scriptsrc="https://r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js"type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
<styletype="text/css">
.canvas{border:1pxsolid#000;display:block;margin:0auto;margin-top:50px;}
</style>
<script>
window.onload=function(){
functiondraw(){
varcanvas=document.getElementById('canvas');
if(canvas.getContext){
varctx=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>
<styletyrp="text/css">
canvas{border:1pxsolidblack;margin:0auto;display:block;}
</style>
</head>
<body>
<canvasid="canvas">当前浏览器不支持，请更换浏览器</canvas>
</body>
</html>
3.绘制填充图形
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="utf-8">
<title></title>
<linkrel="stylesheet"href="http://r01.uzaicdn.com/content/v1/styles/subject.css">
<linkrel="stylesheet"href="styles/lianxi.css">
<scriptsrc="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
<scriptsrc="scripts/lianxi.js"></script>
<!--[ifltIE9]><scriptsrc="https://r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
<!--[ifIE6]><scriptsrc="https://r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js"type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
<styletype="text/css">
.canvas{border:1pxsolid#000;display:block;margin:0auto;margin-top:50px;}
</style>
<script>
window.onload=function(){
functiondraw(){
varcanvas=document.getElementById('canvas');
if(canvas.getContext){
varctx=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>
<styletyrp="text/css">
canvas{border:1pxsolidblack;margin:0auto;display:block;}
</style>
</head>
<body>
<canvasid="canvas">当前浏览器不支持，请更换浏览器</canvas>
</body>
</html>
4.绘制圆弧
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="utf-8">
<title></title>
<linkrel="stylesheet"href="http://r01.uzaicdn.com/content/v1/styles/subject.css">
<linkrel="stylesheet"href="styles/lianxi.css">
<scriptsrc="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
<scriptsrc="scripts/lianxi.js"></script>
<!--[ifltIE9]><scriptsrc="https://r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
<!--[ifIE6]><scriptsrc="https://r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js"type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
<styletype="text/css">
canvas{border:1pxsolid#000;display:block;margin:0auto;margin-top:50px;}
</style>
<script>
window.onload=function(){
functiondraw(){
varcanvas=document.getElementById('canvas');
if(canvas.getContext){
varctx=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>
<canvasid="canvas">当前浏览器不支持，请更换浏览器</canvas>
</body>
</html>
5.绘制矩形
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="utf-8">
<title></title>
<linkrel="stylesheet"href="http://r01.uzaicdn.com/content/v1/styles/subject.css">
<linkrel="stylesheet"href="styles/lianxi.css">
<scriptsrc="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
<scriptsrc="scripts/lianxi.js"></script>
<!--[ifltIE9]><scriptsrc="https://r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
<!--[ifIE6]><scriptsrc="https://r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js"type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
<styletype="text/css">
canvas{border:1pxsolid#000;display:block;margin:0auto;margin-top:50px;}
</style>
<script>
window.onload=function(){
functiondraw(){
varcanvas=document.getElementById('canvas');
if(canvas.getContext){
varctx=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>
<canvasid="canvas">当前浏览器不支持，请更换浏览器</canvas>
</body>
</html>
6.绘制文本
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="utf-8">
<title></title>
<linkrel="stylesheet"href="http://r01.uzaicdn.com/content/v1/styles/subject.css">
<linkrel="stylesheet"href="styles/lianxi.css">
<scriptsrc="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
<scriptsrc="scripts/lianxi.js"></script>
<!--[ifltIE9]><scriptsrc="https://r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
<!--[ifIE6]><scriptsrc="https://r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js"type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
<styletype="text/css">
canvas{border:1pxsolid#000;display:block;margin:0auto;margin-top:50px;}
</style>
<script>
window.onload=function(){
functiondraw(){
varcanvas=document.getElementById('canvas');
if(canvas.getContext){
varctx=canvas.getContext('2d');
canvas.width=500;
canvas.height=500;
ctx.font="48pxserif";
ctx.fillText("Helloworld",10,50);
}else{
alert('当前浏览器不支持，请更换浏览器');
}
}
draw();
}
</script>
</head>
<body>
<canvasid="canvas">当前浏览器不支持，请更换浏览器</canvas>
</body>
</html>
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="utf-8">
<title></title>
<linkrel="stylesheet"href="http://r01.uzaicdn.com/content/v1/styles/subject.css">
<linkrel="stylesheet"href="styles/lianxi.css">
<scriptsrc="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
<scriptsrc="scripts/lianxi.js"></script>
<!--[ifltIE9]><scriptsrc="https://r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
<!--[ifIE6]><scriptsrc="https://r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js"type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
<styletype="text/css">
canvas{border:1pxsolid#000;display:block;margin:0auto;margin-top:50px;}
</style>
<script>
window.onload=function(){
functiondraw(){
varcanvas=document.getElementById('canvas');
if(canvas.getContext){
varctx=canvas.getContext('2d');
canvas.width=500;
canvas.height=500;
ctx.font="48pxserif";
ctx.strokeText("Helloworld",10,50);
}else{
alert('当前浏览器不支持，请更换浏览器');
}
}
draw();
}
</script>
</head>
<body>
<canvasid="canvas">当前浏览器不支持，请更换浏览器</canvas>
</body>
</html>
7.图片操作
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="utf-8">
<title></title>
<linkrel="stylesheet"href="http://r01.uzaicdn.com/content/v1/styles/subject.css">
<linkrel="stylesheet"href="styles/lianxi.css">
<scriptsrc="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
<scriptsrc="scripts/lianxi.js"></script>
<!--[ifltIE9]><scriptsrc="https://r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
<!--[ifIE6]><scriptsrc="https://r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js"type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
<styletype="text/css">
canvas{border:1pxsolid#000;display:block;margin:0auto;margin-top:50px;}
</style>
<script>
window.onload=function(){
functiondraw(){
varcanvas=document.getElementById('canvas');
if(canvas.getContext){
varctx=canvas.getContext('2d');
canvas.width=500;
canvas.height=500;
varimg=newImage();
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>
<canvasid="canvas">当前浏览器不支持，请更换浏览器</canvas>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！