canvas畫圖,一些總結以及實例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="400px" height="400px"></canvas>
</body>
<script type="text/javascript">
var canvas=document.getElementById('canvas');
if(canvas==null){
return false;
}
var context=canvas.getContext('2d');

// context.fillRect(0,0,100,100);
// context.strokeRect(120,0,100,100);
//
// context.fillStyle="red";
// context.strokeStyle="aqua";
// context.fillRect(0,120,100,100);
// context.strokeRect(120,120,100,100);
//
// context.fillStyle="rgba(255,0,0,0.2)";
// context.strokeStyle="rgba(255,0,0,0.2)";
// context.fillRect(240,0,100,100);
// context.strokeRect(240,120,100,100);
// context.clearRect(50,50,240,120);

//context.arc(x,y,radius.atarAngle,anticlock,anticlockwise)
// x:圓心的x坐標
// y:圓心的y坐標
// straAngle:開始角度
// endAngle:結束角度
// anticlockwise:是否逆時針（true）為逆時針，(false)為順時針
//
// context.beginPath();
// context.arc(200,150,100,0,Math.PI*2,false);
// context.closePath();
// context.fillStyle="orangered";
// context.fill();

// var n=0;
// context.beginPath();
// context.arc(100,150,50,0,Math.PI/2,false);
// context.fillStyle="orchid";
// context.fill();
// context.strokeStyle="chartreuse";
// context.closePath();
// context.stroke();
//
// context.beginPath();
// context.arc(300,150,50,0,Math.PI/2,false);
// context.fillStyle="orchid";
// context.fill();
// context.strokeStyle="chartreuse";
// context.closePath();
// context.stroke();

// 對于線段的繪制
// x:x坐標
// y:y坐標
// 每次畫線都從moveTo的點到lineTo的點，
// 如果沒有moveTo那么第一次lineTo的效果和moveTo一樣，
// 每次lineTo后如果沒有moveTo，那么下次lineTo的開始點為前一次lineTo的結束點

//
// context.beginPath();
// context.strokeStyle = "rgb(250,0,0)";
// context.fillStyle = "rgb(250,0,0)"
// //實驗證明第一次lineTo的時候和moveTo功能一樣
// context.lineTo(100, 100);
// //之后的lineTo會以上次lineTo的節(jié)點為開始
// context.lineTo(200, 200);
// context.lineTo(200, 100);
// context.moveTo(200, 50);
// context.lineTo(100,50);
// context.stroke();

//菊花圖
// context.fillStyle="cornsilk";
// context.fillRect(0,0,400,300);
// var n=0;
// var dx=150;
// var dy=150;
// var s=100;
// context.beginPath();
// context.fillStyle="darkorange";
// context.strokeStyle="black";
// var x=Math.sin(0);
// var y=Math.cos(0);
// var dig=Math.PI/1511;
// for (var i=0;i<30;i++) {
// var x=Math.sin(idig);
// var y=Math.cos(idig);
// context.lineTo(dx+xs,dy+y*s)
// }
// context.closePath();
// context.fill();
// context.stroke();

  //繪制貝塞爾曲線context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) 
  //繪制二次樣條曲線 context.quadraticCurveTo(qcpx,qcpy,qx,qy)

// cp1x:第一個控制點x坐標
// cp1y:第一個控制點y坐標
// cp2x:第二個控制點x坐標
// cp2y:第二個控制點y坐標
// x:終點x坐標
// y:終點y坐標
//
// qcpx:二次樣條曲線控制點x坐標
// qcpy:二次樣條曲線控制點y坐標
// qx:二次樣條曲線終點x坐標
// qy:二次樣條曲線終點y坐標

// context.moveTo(50,50);
// context.bezierCurveTo(50,50,150,50,150,150);
// context.stroke();
// context.quadraticCurveTo(150,250,250,250);
// context.stroke();

// context.fillStyle="chocolate";
// context.fillRect(0,0,400,300);
// var n=0;
// var dx=150;
// var dy=150;
// var s=100;
// context.beginPath();
// context.fillStyle="cadetblue";
// var x=Math.sin(0);
// var y=Math.cos(0);
// var dig =Math.PI/1511;
// for (var i=0;i<30;i++) {
// var x=Math.sin(idig);
// var y=Math.cos(i*dig);
// context.bezierCurveTo(dx + x * s, dy + y * s , dx + x * s , dy + y * s, dx + x * s, dy + y * s)
// }
// context.closePath();
// context.fill();
// context.stroke();

//線性漸變var lg= context.createLinearGradient(xStart,yStart,xEnd,yEnd)
// 線性漸變顏色lg.addColorStop(offset,color)

// xstart:漸變開始點x坐標
// ystart:漸變開始點y坐標
// xEnd:漸變結束點x坐標
// yEnd:漸變結束點y坐標
//
// offset:設定的顏色離漸變結束點的偏移量(0~1)
// color:繪制時要使用的顏色

// var gl=context.createLinearGradient(0,0,0,300)
//
// gl.addColorStop(0,"red");
// gl.addColorStop(0.5,"black");
// gl.addColorStop(1,"pink");
//
// context.fillStyle=gl;
// context.fillRect(0,0,400,300);

//徑向漸變rg=context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)

// xStart:發(fā)散開始圓心x坐標
// yStart:發(fā)散開始圓心y坐標
// radiusStart:發(fā)散開始圓的半徑
// xEnd:發(fā)散結束圓心的x坐標
// yEnd:發(fā)散結束圓心的y坐標
//
// radiusEnd:發(fā)散結束圓的半徑
// offset:設定的顏色離漸變結束點的偏移量(0~1)
// color:繪制時要使用的顏色
// var gl=context.createRadialGradient(200,150,0,200,150,100)
// gl.addColorStop(0.1,"red");
// gl.addColorStop(1,"lightblue");
// context.fillStyle=gl;
// context.beginPath();
// context.arc(200,150,100,0,Math.PI*2,true);
// context.closePath();
// context.fill();

// var gl=context.createRadialGradient(100,150,10,300,150,50)
// gl.addColorStop(0.1,"red");
// gl.addColorStop(1,"lightblue");
// context.fillStyle=gl;
// context.fillRect(0,0,400,300);

// context.save();
// context.fillStyle="chartreuse";
// context.fillRect(0,0,400,300);
//
// context.fillStyle="crimson";
//
// context.translate(100,100);
// context.scale(0.5,0.5);
// context.rotate(Math.PI/4);
// context.fillRect(0,0,100,100);
//
// context.restore();
// context.save();
// context.fillStyle="aqua";
// context.translate(200,100);
// context.scale(0.8,0.8);
// context.rotate(Math.PI/4);
// context.fillRect(0,0,100,100);

</script>

</html>

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 一：canvas簡介 1.1什么是canvas？ ①：canvas是HTML5提供的一種新標簽 ②：HTML5 ...
    GreenHand1閱讀 4,874評論 2贊 32
  • 0x001 Canvas是啥？ 說白了Canvas就是一塊畫布，可以使用js當畫筆在上面繪畫的畫布，可以顯示在網頁...
    賣梳子的鯉魚閱讀 2,018評論 1贊 21
  • 一、基礎介紹和畫直線 大多數(shù)現(xiàn)代瀏覽器都是支持Canvas的,比如 Firefox, safari, chrome...
    空谷悠閱讀 945評論 0贊 1
  • 熟悉html5的程序員們肯定都知道 元素，該元素是用來在頁面中規(guī)定一塊區(qū)域，然后由js在該區(qū)域內繪制圖形。canv...
    米幾V閱讀 2,331評論 1贊 5
  • 一、canvas簡介 1.1 什么是canvas？（了解） 是HTML5提供的一種新標簽 Canvas是一個矩形區(qū)...
    Looog閱讀 4,034評論 3贊 40

友情鏈接更多精彩內容