canvas系列教程02-直线和曲线
生活随笔
收集整理的這篇文章主要介紹了
canvas系列教程02-直线和曲线
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
上一篇文章我們搭建了基礎環境，然后畫了個矩形玩了玩，至于如何畫矩形線框之類的，這些看看手冊就行了，沒啥復雜的，參數搞對單詞別拼錯就OK.
這篇文章說下常見的坑和我們常用資料又比那些基礎的線框實用些的曲線。
啥也不說，先上一梭子代碼。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>canvas{width:800px;height: 600px;margin: 0 auto;border: 1px solid #000;display: block;}</style><script type="text/javascript">window.onload = function(){var oC = document.querySelector('#c1');var gd = oC.getContext('2d');gd.beginPath();//忽略以前的畫的的東西從新開始gd.moveTo(30,30);gd.lineTo(30,100);gd.lineWidth = 10;//注意不加pxgd.strokeStyle = 'aqua';//神一樣的顏色gd.stroke();};</script></head> <body><canvas id="c1" width="300" height="300"></canvas> </body> </html>復制代碼moveTo ,lineTo，設個寬度顏色一stroke（描邊），完事兒。
好了，我告訴上面的例子是坑爹玩意，直接上坑。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>canvas{width:800px;height: 600px;margin: 0 auto;border: 1px solid #000;display: block;}</style><script type="text/javascript">window.onload = function(){var oC = document.querySelector('#c1');var gd = oC.getContext('2d');gd.beginPath();//忽略以前的畫的的東西從新開始gd.moveTo(30,30);gd.lineTo(200,200);gd.lineWidth = 10;//注意不加pxgd.strokeStyle = 'aqua';//神一樣的顏色gd.stroke();};</script></head> <body><canvas id="c1" width="300" height="300"></canvas></body> </html>復制代碼是不是發現圖形變形了，我不想解釋太多為什么，記住就好了，還是那句話，你先會用canvas畫寫簡單的東西，比如餅圖，比如畫個棋盤，比如做個ps里面的去色之類的，基礎東西不會之前扯理論和名詞都是裝13.
只說結果，不要在樣式里面定義canvas的寬高，直接 標簽里面定義，解決方案上，
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>canvas{margin: 0 auto;border: 1px solid #000;display: block;}</style><script type="text/javascript">window.onload = function(){var oC = document.querySelector('#c1');var gd = oC.getContext('2d');gd.beginPath();//忽略以前的畫的的東西從新開始gd.moveTo(30,30);gd.lineTo(200,200);gd.lineWidth = 10;//注意不加pxgd.strokeStyle = 'aqua';//神一樣的顏色gd.stroke();};</script></head> <body><canvas id="c1" width="300" height="300"></canvas> </body> </html>復制代碼我知道有些人會說這樣結構表現不分離啊（說這句話的50%以上都是裝B狗），滿足你要求。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>canvas{margin: 0 auto;border: 1px solid #000;display: block;}</style><script type="text/javascript">window.onload = function(){var oC = document.querySelector('#c1');oC.width = '300';oC.height = '300';var gd = oC.getContext('2d');gd.beginPath();//忽略以前的畫的的東西從新開始gd.moveTo(30,30);gd.lineTo(200,200);gd.lineWidth = 10;//注意不加pxgd.strokeStyle = 'aqua';//神一樣的顏色gd.stroke();};</script> </head> <body><canvas id="c1"></canvas></body> </html>復制代碼感覺天都亮了，吼吼，注意樣式比屬性的優先級高，千萬別因為我這句話去研究優先級，因為實際工作中用的很少，面試考這些的都是……先把我給你的例子敲會了，學不好的大部分不是腦子笨，是特么的腦子太好使，閑的蛋疼想得太多了。
第二個坑，沒有一個項目只畫一個圖形的，多圖形畫的時候，這么玩。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>canvas{margin: 0 auto;border: 1px solid #000;display: block;}</style><script type="text/javascript">window.onload = function(){var oC = document.querySelector('#c1');var gd = oC.getContext('2d');gd.beginPath();//忽略以前的畫的的東西從新開始gd.moveTo(449,220);gd.lineTo(584,220);gd.lineTo(625,87);gd.lineTo(667,220);gd.lineTo(793,220);gd.lineTo(693,301);gd.lineTo(735,435);gd.lineTo(626,301);gd.lineTo(520,435);gd.lineTo(555,301);gd.closePath();gd.lineWidth = 10;//注意不加pxgd.strokeStyle = 'red';//神一樣的顏色gd.stroke();gd.beginPath();//忽略以前的畫的的東西從新開始gd.moveTo(147,387);gd.lineTo(249,207);gd.lineTo(349,387);gd.lineTo(154,387);gd.closePath();gd.lineWidth = 10;//注意不加pxgd.strokeStyle = 'red';//神一樣的顏色gd.stroke();};</script></head> <body><canvas id="c1" width="800" height="600"></canvas> </body> </html>復制代碼好，我們開始玩曲線，你懂的，曲線是最美的。
好，回到技術，生活這么美好，我們先畫個笑臉再說。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>canvas{margin: 0 auto;border: 1px solid #000;display: block;}</style><script type="text/javascript">window.onload = function(){function d2a(n){return n*Math.PI/180;}var oC = document.querySelector('#c1');var gd = oC.getContext('2d');gd.beginPath();//gd.moveTo(200,200);gd.quadraticCurveTo(300,100,400,200);gd.lineWidth = 10;//注意不加pxgd.strokeStyle = 'red';//神一樣的顏色gd.stroke();};</script></head> <body><canvas id="c1" width="800" height="600"></canvas></body> </html> 復制代碼說一點，arc用的是弧度，d2a不明白也沒事，會用就行了。
最后說下最迷人的兩個曲線，名字我就不說了，我拼音學的不好。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>canvas{margin: 0 auto;border: 1px solid #000;display: block;}</style><script type="text/javascript">window.onload = function(){function d2a(n){return n*Math.PI/180;}var oC = document.querySelector('#c1');var gd = oC.getContext('2d');gd.beginPath();//gd.moveTo(200,200);gd.quadraticCurveTo(300,100,400,200);gd.lineWidth = 10;//注意不加pxgd.strokeStyle = 'red';//神一樣的顏色gd.stroke();};</script></head> <body><canvas id="c1" width="800" height="600"></canvas> </body> </html>復制代碼這個也很簡單吧，最后給大家上兩個例子，這個有點小復雜，不過你忍得住，因為太美了。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>canvas{margin: 0 auto;border: 1px solid #000;display: block;}</style><script type="text/javascript">window.onload = function(){function d2a(n){return n*Math.PI/180;}var oC = document.querySelector('#c1');var gd = oC.getContext('2d');gd.beginPath();//gd.moveTo(200,200);gd.quadraticCurveTo(300,300,400,200);gd.lineWidth = 10;//注意不加pxgd.strokeStyle = 'red';//神一樣的顏色gd.stroke();};</script></head> <body><canvas id="c1" width="800" height="600"></canvas></body> </html>復制代碼很多人都搞不明白那些點怎么來的，多說一句其實計算的是兩點中線（quadraticCurveTo），三次我就不解釋了，因為算兩次中線，你不知道數據沒事，直接找設計師要就OK.
最后，幫你理解點，我把所有的點都畫出來，
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>canvas{margin: 0 auto;border: 1px solid #000;display: block;}</style><script type="text/javascript">window.onload = function(){function d2a(n){return n*Math.PI/180;}var oC = document.querySelector('#c1');var gd = oC.getContext('2d');gd.beginPath();//gd.moveTo(200,200);gd.bezierCurveTo(300,400,400,200,500,200);gd.lineWidth = 10;//注意不加pxgd.strokeStyle = 'red';//神一樣的顏色gd.stroke();};</script></head> <body><canvas id="c1" width="800" height="600"></canvas> </body> </html>復制代碼真棒，最后感謝我們家太白陪我敲代碼。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>canvas{margin: 0 auto;border: 1px solid #000;display: block;}</style><script type="text/javascript">window.onload = function(){function d2a(n){return n*Math.PI/180;}var oC = document.querySelector('#c1');var gd = oC.getContext('2d');drawBezierCurve(200,200,300,400,400,200,500,200);function drawBezierCurve(startX, startY, controlX1, controlY1, controlX2, controlY2, endX, endY, curveColor, curveWidth) {var radian = Math.PI / 180;gd.beginPath();gd.strokeStyle = curveColor || "red";gd.lineWidth = curveWidth || 2;gd.moveTo(startX, startY);gd.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);gd.stroke();gd.beginPath();gd.strokeStyle = "black";gd.lineWidth = 10;gd.arc(controlX1, controlY1, 5, 0 * radian, 360 * radian, false);gd.stroke();gd.beginPath();gd.strokeStyle = "black";gd.lineWidth = 10;gd.arc(controlX2, controlY2, 5, 0 * radian, 360 * radian, false);gd.stroke();gd.beginPath();gd.lineWidth = 1;gd.moveTo(startX, startY);gd.lineTo(controlX1, controlY1);gd.lineTo(controlX2, controlY2);gd.lineTo(endX, endY);gd.stroke();}};</script></head> <body><canvas id="c1" width="800" height="600"></canvas> </body> </html>復制代碼總結
以上是生活随笔為你收集整理的canvas系列教程02-直线和曲线的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： golang常用手册：数组、变量作用域、
- 下一篇： Ubuntu下打开rar乱码问题的解决方