1.canvas
1.1創(chuàng)建一個畫布
<canvas id= "mycanvas" width=""200 height=""100></canvas>
style="border:1px solid #000000;"
注：id為指定屬性为狸，width和height定義畫布的大小,style添加邊框。
1.2繪制畫像
var c=document.getElementById("mycanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,200,100);
注：
getContext（"2d"）-對象是內(nèi)建的HTML5對象 凌摄；
fillStyle-可以是css顏色另锋，漸變或圖案，默認設(shè)置是#000000（黑色）君丁；
fillRect(x,y,width,height)-定義矩形當前的填充方式。
1.3繪制線條
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
注：
moveTo(x,y)-定義線條開始坐標
lineTo(x,y)-定義線條結(jié)束坐標
stroke-繪制線條方法
1.6繪制圓形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
注：
arc(x,y,start,stop)-繪制圓形方法
1.7繪制文本
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
ctx.strokeText("Hello World",10,80);
效果圖
注：
font-定義字體fillText(text,x,y)-繪制實心的文本strokeText(text,x,y)-繪制空心文本
1.8漸變
1.8.1線條漸變
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 創(chuàng)建漸變
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充漸變
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
注：createLinearGradient(x,y,x1,y1)-創(chuàng)建線條漸變
線條漸變效果圖
1.8.2徑向/圓漸變
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 創(chuàng)建漸變
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充漸變
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
注：createRadialGradient(x,y,r,x1,y1,r1) - 創(chuàng)建一個徑向/圓漸變
徑向/圓漸變效果圖
1.9圖像
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
drawlmage(image,x,y)-圖像放到畫布位置
2019年4月26日
