html5--day2上

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日