1.canvas
1.1创建一个画布
<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"）-对象是内建的HTML5对象 ；
fillStyle-可以是css颜色，渐变或图案，默认设置是#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)-定义线条结束坐标
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");
// 创建渐变
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)-创建线条渐变
线条渐变效果图
1.8.2径向/圆渐变
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 创建渐变
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) - 创建一个径向/圆渐变
径向/圆渐变效果图
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日
