canvas系列教程02-直线和曲线
上一篇文章我們搭建了基礎(chǔ)環(huán)境，然后畫了個(gè)矩形玩了玩，至于如何畫矩形線框之類的，這些看看手冊(cè)就行了，沒啥復(fù)雜的，參數(shù)搞對(duì)單詞別拼錯(cuò)就OK.
這篇文章說下常見的坑和我們常用資料又比那些基礎(chǔ)的線框?qū)嵱眯┑那€。
啥也不說，先上一梭子代碼。
<!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>復(fù)制代碼moveTo ,lineTo，設(shè)個(gè)寬度顏色一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>復(fù)制代碼是不是發(fā)現(xiàn)圖形變形了，我不想解釋太多為什么，記住就好了，還是那句話，你先會(huì)用canvas畫寫簡單的東西，比如餅圖，比如畫個(gè)棋盤，比如做個(gè)ps里面的去色之類的，基礎(chǔ)東西不會(huì)之前扯理論和名詞都是裝13.
只說結(jié)果，不要在樣式里面定義canvas的寬高，直接 標(biāo)簽里面定義，解決方案上，
<!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>復(fù)制代碼我知道有些人會(huì)說這樣結(jié)構(gòu)表現(xiàn)不分離啊（說這句話的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>復(fù)制代碼感覺天都亮了，吼吼，注意樣式比屬性的優(yōu)先級(jí)高，千萬別因?yàn)槲疫@句話去研究優(yōu)先級(jí)，因?yàn)閷?shí)際工作中用的很少，面試考這些的都是……先把我給你的例子敲會(huì)了，學(xué)不好的大部分不是腦子笨，是特么的腦子太好使，閑的蛋疼想得太多了。
第二個(gè)坑，沒有一個(gè)項(xiàng)目只畫一個(gè)圖形的，多圖形畫的時(shí)候，這么玩。
<!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>復(fù)制代碼好，我們開始玩曲線，你懂的，曲線是最美的。
好，回到技術(shù)，生活這么美好，我們先畫個(gè)笑臉再說。
<!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> 復(fù)制代碼說一點(diǎn)，arc用的是弧度，d2a不明白也沒事，會(huì)用就行了。
最后說下最迷人的兩個(gè)曲線，名字我就不說了，我拼音學(xué)的不好。
<!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>復(fù)制代碼這個(gè)也很簡單吧，最后給大家上兩個(gè)例子，這個(gè)有點(diǎn)小復(fù)雜，不過你忍得住，因?yàn)樘懒恕?/p> <!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>復(fù)制代碼
很多人都搞不明白那些點(diǎn)怎么來的，多說一句其實(shí)計(jì)算的是兩點(diǎn)中線（quadraticCurveTo），三次我就不解釋了，因?yàn)樗銉纱沃芯€，你不知道數(shù)據(jù)沒事，直接找設(shè)計(jì)師要就OK.
最后，幫你理解點(diǎn)，我把所有的點(diǎn)都畫出來，
<!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>復(fù)制代碼真棒，最后感謝我們家太白陪我敲代碼。
<!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>復(fù)制代碼總結(jié)
以上是生活随笔為你收集整理的canvas系列教程02-直线和曲线的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： golang常用手册：数组、变量作用域、
- 下一篇： Ubuntu下打开rar乱码问题的解决方