區域剪輯
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> .canvas{border:1px solid #abcdef;background-color: #a9add2;} </style> </head> <body> <canvas class="canvas" id="canvas" width="600" height="400">您的瀏覽器不支持canvas</canvas> <script> var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d");//背景關系，繪圖環境 //在矩形右上角繪制一個圓 ctx.arc(300,100,200,0,2*Math.PI,true); //進行區域剪輯 //后面繪制的所有圖形都會在這個原型區域內繪制，超出部分被剪輯 ctx.clip(); ctx.fillStyle="pink"; //繪制矩形 ctx.fillRect(100,100,200,200); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> .canvas{border:1px solid #abcdef;background-color: #a9add2;} </style> </head> <body> <canvas class="canvas" id="canvas" width="600" height="400">您的瀏覽器不支持canvas</canvas> <script> var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d");//背景關系，繪圖環境 //在矩形右上角繪制一個圓 ctx.arc(300,100,200,0,2*Math.PI,true); //進行區域剪輯 //后面繪制的所有圖形都會在這個原型區域內繪制，超出部分被剪輯 ctx.clip(); ctx.fillStyle="pink"; //繪制矩形 ctx.fillRect(100,100,200,200); //再繪制一個圓 ctx.fillStyle="#abcdef"; ctx.beginPath(); ctx.arc(400,300,100,0,2*Math.PI,true); ctx.fill(); </script> </body> </html>
取消區域剪輯，使用save和restore
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> .canvas{border:1px solid #abcdef;background-color: #a9add2;} </style> </head> <body> <canvas class="canvas" id="canvas" width="600" height="400">您的瀏覽器不支持canvas</canvas> <script> var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d");//背景關系，繪圖環境 ctx.save(); //在矩形右上角繪制一個圓 ctx.arc(300,100,200,0,2*Math.PI,true); //進行區域剪輯 //后面繪制的所有圖形都會在這個原型區域內繪制，超出部分被剪輯 ctx.clip(); ctx.fillStyle="pink"; //繪制矩形 ctx.fillRect(100,100,200,200); ctx.restore(); //再繪制一個圓 ctx.fillStyle="#abcdef"; ctx.beginPath(); ctx.arc(400,300,100,0,2*Math.PI,true); ctx.fill(); </script> </body> </html>
繪制四色圓
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> .canvas{border:1px solid #abcdef;background-color: #a9add2;} </style> </head> <body> <canvas class="canvas" id="canvas" width="600" height="400">您的瀏覽器不支持canvas</canvas> <script> var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d");//背景關系，繪圖環境 //繪制一個圓 ctx.arc(300,200,100,0,2*Math.PI,true); //進行區域剪輯 //后面繪制的所有圖形都會在這個原型區域內繪制，超出部分被剪輯 ctx.clip(); ctx.fillStyle="pink"; //繪制矩形 ctx.fillRect(200,100,300,200); ctx.fillStyle="lightgreen"; //繪制矩形 ctx.fillRect(300,100,400,200); ctx.fillStyle="#abcdef"; //繪制矩形 ctx.fillRect(200,200,300,300); ctx.fillStyle="orange"; //繪制矩形 ctx.fillRect(300,200,400,300); </script> </body> </html>
陰影
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> .canvas{border:1px solid #abcdef;background-color: #a9add2;} </style> </head> <body> <canvas class="canvas" id="canvas" width="600" height="400">您的瀏覽器不支持canvas</canvas> <script> var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d");//背景關系，繪圖環境 ctx.fillStyle="pink"; //陰影x軸偏移 ctx.shadowOffsetX=10; //陰影y軸偏移 ctx.shadowOffsetY=10; //陰影顏色 ctx.shadowColor="rgba(0,0,0,.2)"; //模糊程度 ctx.shadowBlur=1; //繪制矩形 ctx.fillRect(100,100,100,100); </script> </body> </html>
文字陰影
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> .canvas{border:1px solid #abcdef;background-color: #a9add2;} </style> </head> <body> <canvas class="canvas" id="canvas" width="600" height="400">您的瀏覽器不支持canvas</canvas> <script> var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d");//背景關系，繪圖環境 ctx.fillStyle="pink"; //陰影x軸偏移 ctx.shadowOffsetX=10; //陰影y軸偏移 ctx.shadowOffsetY=10; //陰影顏色 ctx.shadowColor="rgba(0,0,0,.2)"; //模糊程度 ctx.shadowBlur=1; //繪制矩形 ctx.fillRect(100,100,100,100); //繪制文字 ctx.font="20px sans-serif"; ctx.fillText("cyy呀",300,300); </script> </body> </html>
補充一下，設定文字的大小，這個ctx.font中，必須要加字體
我剛開始只是單純設定了20px，發現是不生效的
必須加上字體如sans-serif才可以
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> .canvas{border:1px solid #abcdef;background-color: #a9add2;} </style> </head> <body> <canvas class="canvas" id="canvas" width="600" height="400">您的瀏覽器不支持canvas</canvas> <script> var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d");//背景關系，繪圖環境 ctx.fillStyle="pink"; //陰影x軸偏移 ctx.shadowOffsetX=10; //陰影y軸偏移 ctx.shadowOffsetY=10; //陰影顏色 ctx.shadowColor="rgba(0,0,0,.2)"; //模糊程度 ctx.shadowBlur=1; //繪制矩形 ctx.fillRect(100,100,100,100); //繪制文字 ctx.font="20px sans-serif"; ctx.fillText("cyy呀",300,300); ctx.fillText("小仙女",100,300); </script> </body> </html>
繪制曲線
圓弧的繪制 arc
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> .canvas{border:1px solid #abcdef;background-color: #a9add2;} </style> </head> <body> <canvas class="canvas" id="canvas" width="600" height="400">您的瀏覽器不支持canvas</canvas> <script> var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d");//背景關系，繪圖環境 ctx.arc(200,200,50,0,Math.PI/2,true);//逆時針 ctx.stroke(); ctx.beginPath(); ctx.arc(400,200,50,0,Math.PI/2,false);//順時針 ctx.stroke(); </script> </body> </html>
二次貝塞爾曲線生成工具：
http://blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html
三次貝塞爾曲線生成工具
http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html
二次貝塞爾曲線由三個點完成
最左邊的點對應的是moveTo的坐標
中間的點對應的是quadraticCurveTo的第一個坐標點引數
最右邊的點對應的是quadraticCurveTo的第二個坐標點引數
三次貝塞爾曲線由4個點完成
最左邊的點對應的是moveTo的坐標
第一個柄對應的是quadraticCurveTo的第一個坐標點引數
第二個柄對應的是quadraticCurveTo的第二個坐標點引數
最右邊的點對應的是quadraticCurveTo的第三個坐標點引數
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/5398.html
標籤：HTML5
上一篇：canvas中文字和圖片的繪制