canvas知識總結(jié)
更新時間：2017年01月25日 11:23:23 作者：13611606223
本文主要介紹了canvas的相關(guān)知識。具有很好的參考價值，下面跟著小編一起來看下吧
1.基礎(chǔ)知識
canvas元素繪制圖像的時候有兩種方法，分別是
context.fill()//填充
context.stroke()//繪制邊框
style:在進行圖形繪制前，要設(shè)置好繪圖的樣式
context.fillStyle//填充的樣式
context.strokeStyle//邊框樣式
context.lineWidth//圖形邊框?qū)挾?/pre>
context.arc(centerx圓心橫左邊,centery圓心縱坐標(biāo),radius半徑,startingAngle起始弧度值,endingAngle結(jié)束弧度值,anticlockwise='false'順時針默認false)
2.繪制非填充線段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" >
<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="http://r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
<!--[if IE 6]><script src="http://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;//邊框?qū)挾?
ctx.strokeStyle="red"; //邊框樣式
ctx.closePath(); //一個繪畫結(jié)束
ctx.stroke();//繪制線段
}else{
alert('當(dāng)前瀏覽器不支持，請更換瀏覽器');
}
}
draw();
}
</script>
<style tyrp="text/css">
canvas{ border: 1px solid black;margin: 0 auto;display: block;}
</style>
</head>
<body>
<canvas id="canvas">當(dāng)前瀏覽器不支持，請更換瀏覽器</canvas>
</body>
</html>
3.繪制填充圖形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" >
<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="http://r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
<!--[if IE 6]><script src="http://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;//邊框?qū)挾?
ctx.strokeStyle="blue"; //邊框樣式
ctx.closePath(); //一個繪畫結(jié)束
ctx.stroke();//繪制線段
}else{
alert('當(dāng)前瀏覽器不支持，請更換瀏覽器');
}
}
draw();
}
</script>
<style tyrp="text/css">
canvas{ border: 1px solid black;margin: 0 auto;display: block;}
</style>
</head>
<body>
<canvas id="canvas">當(dāng)前瀏覽器不支持，請更換瀏覽器</canvas>
</body>
</html>
4.繪制圓弧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" >
<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="http://r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
<!--[if IE 6]><script src="http://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;//邊框?qū)挾?
ctx.strokeStyle="red"; //邊框樣式
ctx.arc(100, 100, 30, 0, 1.5*Math.PI);
ctx.closePath(); //一個繪畫結(jié)束，如果繪畫不是封閉的，就封閉起來
ctx.stroke();//繪制線段
ctx.beginPath(); //開始一個新的繪畫
ctx.lineWidth=5;//邊框?qū)挾?
ctx.strokeStyle="red"; //邊框樣式
ctx.arc(200, 100, 30, 0, 2*Math.PI);
ctx.closePath(); //一個繪畫結(jié)束，如果繪畫不是封閉的，就封閉起來
ctx.stroke();//繪制線段
ctx.beginPath(); //開始一個新的繪畫
ctx.lineWidth=5;//邊框?qū)挾?
ctx.strokeStyle="red"; //邊框樣式
ctx.arc(300, 100, 30, 0, 0.5*Math.PI);
ctx.closePath(); //一個繪畫結(jié)束，如果繪畫不是封閉的，就封閉起來
ctx.stroke();//繪制線段
ctx.beginPath(); //開始一個新的繪畫
ctx.lineWidth=5;//邊框?qū)挾?
ctx.strokeStyle="red"; //一個繪畫結(jié)束，如果繪畫不是封閉的，就封閉起來
ctx.arc(400, 100, 30, 0, 0.5*Math.PI,true);//注意：0*PI，0.5*PI，1*PI，1。5*PI，2*PI所占據(jù)的位置是固定的
ctx.closePath(); //一個繪畫結(jié)束
ctx.stroke();//繪制線段
ctx.beginPath(); //開始一個新的繪畫
ctx.fillStyle="red"; //邊框樣式
ctx.arc(500, 100, 30, 0, 1.5*Math.PI);
ctx.closePath(); //一個繪畫結(jié)束，如果繪畫不是封閉的，就封閉起來
ctx.fill();//繪制填充
ctx.beginPath(); //開始一個新的繪畫
ctx.lineWidth=5;//邊框?qū)挾?
ctx.strokeStyle="red"; //邊框樣式
ctx.arc(600, 100, 30, 0, 1.5*Math.PI);
ctx.stroke();//繪制線段
}else{
alert('當(dāng)前瀏覽器不支持，請更換瀏覽器');
}
}
draw();
}
</script>
</head>
<body>
<canvas id="canvas">當(dāng)前瀏覽器不支持，請更換瀏覽器</canvas>
</body>
</html>
5.繪制矩形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" >
<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="http://r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
<!--[if IE 6]><script src="http://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);//清除指定矩形區(qū)域，讓清除部分完全透明
ctx.strokeRect(50,50,50,50); //繪制一個矩形的邊框
}else{
alert('當(dāng)前瀏覽器不支持，請更換瀏覽器');
}
}
draw();
}
</script>
</head>
<body>
<canvas id="canvas">當(dāng)前瀏覽器不支持，請更換瀏覽器</canvas>
</body>
</html>
6.繪制文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" >
<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="http://r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
<!--[if IE 6]><script src="http://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('當(dāng)前瀏覽器不支持，請更換瀏覽器');
}
}
draw();
}
</script>
</head>
<body>
<canvas id="canvas">當(dāng)前瀏覽器不支持，請更換瀏覽器</canvas>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" >
<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="http://r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
<!--[if IE 6]><script src="http://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('當(dāng)前瀏覽器不支持，請更換瀏覽器');
}
}
draw();
}
</script>
</head>
<body>
<canvas id="canvas">當(dāng)前瀏覽器不支持，請更換瀏覽器</canvas>
</body>
</html>
7.圖片操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" >
<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="http://r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
<!--[if IE 6]><script src="http://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('當(dāng)前瀏覽器不支持，請更換瀏覽器');
}
}
draw();
}
</script>
</head>
<body>
<canvas id="canvas">當(dāng)前瀏覽器不支持，請更換瀏覽器</canvas>
</body>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
javascript監(jiān)聽頁面刷新和頁面關(guān)閉事件方法詳解
本文主要介紹了javascript監(jiān)聽頁面刷新和頁面關(guān)閉事件的方法，具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
基于JavaScript實現(xiàn)動態(tài)添加刪除表格的行
又一個動態(tài)控制表格的效果，用JavaScript動態(tài)生成表格行、表格列，以及還可動態(tài)刪除這些行列，行等，運行代碼后，點擊對應(yīng)的功能按鈕，即可實現(xiàn)對應(yīng)的表格操作功能，接下來通過代碼實例給大家介紹JavaScript實現(xiàn)動態(tài)添加刪除表格的行，需要的朋友參考下2016-02-02
asp作為主頁面，外接一個js的，我想知道一下能否在js里面調(diào)用asp的變量值，如果能這些值是怎么傳遞過去的呢？本文將提供解決方法，需要的朋友可以參考下2012-12-12
本文為大家詳細介紹下面向?qū)ο蟮睦^承以及如何實現(xiàn)批量實現(xiàn)面向?qū)ο螅信d趣的可以參考下哈，希望對大家有所幫助2013-07-07
這篇文章主要為大家詳細介紹了如何通過JavaScript實現(xiàn)粒子流動效果,文中的示例代碼講解詳細,具有一定的參考價值,感興趣的小伙伴可以參考一下2023-09-09
JS下載文件的實現(xiàn)在網(wǎng)上可以找到很多教程，不過本文為大家介紹的是無刷新下載文件，貌似更酷一點是吧2014-04-04
本篇文章主要介紹了JS打開攝像頭并截圖上傳示例，詳細JS打開攝像頭并截圖上傳至后端的一個完整步驟，有興趣的同學(xué)可以了解一下。2017-02-02
JS如何設(shè)置cookie有效期為當(dāng)天24點并彈出歡迎登陸界面
這篇文章主要介紹了JS如何設(shè)置cookie有效期為當(dāng)天24點并彈出歡迎登陸界面的代碼，代碼比較簡單，好理解，需要的朋友可以參考下2016-08-08
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單五子棋游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要為大家詳細介紹了echarts實現(xiàn)折線圖的拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12