canvas标签只是图形容器,我们必须使用脚本来绘制图形
自己边练习简单案例边学习:
HTML部分:
<canvas id="myCanvas" width="1000" height="500"></canvas>
属性:width、height规定画布的宽高
绘制图形部分则需要JavaScript操作
javascript部分
1、绘制矩形
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d'); //Canvas.getContext(contextID)方法返回一个用于在画布上绘图的环境;
// contextID指定了想要在画布上绘制的类型。目前唯一的合法值是"2d",它指定了二维绘图,并且导致这个方法返回一个环境对象,该对象导出一个二维绘图API
//画矩形,画了四个
ctx.fillStyle="#ff0000"; //fillstyle表示填充颜色
ctx.fillRect(0,0,75,75); //fillRect表示填充矩形;前两个参数表示起点左边;后两个表示矩形宽高
ctx.fillStyle="#00ff00";
ctx.fillRect(0,75,75,75);
ctx.fillStyle="#0000ff";
ctx.fillRect(75,0,75,75);
ctx.fillStyle="#ffff90";
ctx.fillRect(75,75,75,75);
//设置透明度,取值范围0-1
ctx.globalAlpha=0.2; //全局属性;可以控制被画到画布上的片段的默认属性
</script>
2、绘制圆
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
//画5个同心圆
for(var i=0;i<5;i++){
ctx.beginPath(); //path路径;beginPath()方法开始一条路径,或者重置当前路径,绘制路径
ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
ctx.fillStyle="#0000ff";
ctx.fill();
}
/** arc()方法创建弧/曲线(用于创建圆或部分圆)
语法:context.arc(x,y,r,sAngle,eAngle,counterclockwise);
x,y—— 圆的中心的x坐标和y坐标;r——圆的半径;sAngle——起始角,以弧度计(弧的圆形的三点钟位置是0度);
eAngle——结束角,以弧度计;counterclockwise——可选。规定应该逆时针还是顺时针绘图。false=顺时针,true=逆时针。
提示:如果需要创建圆,请把起始角设置为0,结束角设置为2*Math.PI=360°;
*/
</script>
3、绘制直线
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
//关于路径的小案例
ctx.beginPath();
ctx.lineWidth="8"; //路径宽度;
ctx.strokeStyle="blue"; //路径颜色;stroke画,划,敲打键盘;
ctx.moveTo(150,75); //路径起始坐标;前者是横坐标150;即距ctx的左上角(0,0)向右150距离;后者是向下150
ctx.strokestyle="#123311"; //轮廓颜色
ctx.stroke(); //进行绘制;两点相连为直线
</script>
4、定义文本位置
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
//定义文本位置
//textAlign属性,定义文本位置;值有left、right、center,这个位置是某点相对于文字的开始处而言。
var x=150;
var y=150;
ctx.font="30pt Calibri";
ctx.textAlign="left"; //点(150,150)相对于文字的开始处在左边;即文字在该点的右边
ctx.fillStyle="#883735";
ctx.fillText("Hello World!",x,y);
</script>
5、绘制阴影
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
//绘制阴影
ctx.shadowOffsetX=5; //设置或返回形状与阴影的水平距离,x轴偏移量
ctx.shadowOffsetY=5; //垂直距离;Y轴偏移量
ctx.shadowBlur=4; //设置或返回阴影的模糊级数
ctx.shadowColor="rgba(255,0,0,0.5)"; //设置或返回阴影的颜色
ctx.fillStyle="#90afff"; //矩形要填充的颜色;顺序很重要,应该先规定好填充颜色,再画矩形
ctx.fillRect(300,0,150,150); //画一个矩形
</script>
6、设置边角的类型
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
//lineJoin属性设置或返回所创建边角的类型
//属性值:bevel ——创建斜角;round—— 创建圆角;miter——默认,创建尖角
ctx.beginPath();
ctx.moveTo(450,30);
ctx.lineTo(500,150);
ctx.lineTo(600,50);
ctx.lineTo(650,200);
// ctx.lineJoin="round"; //创建圆角;在折线的折角处
ctx.lineJoin="bevel"; //创建斜角
ctx.lineCap="round"; //lineCap属性定义了线条头部的形状;
// 属性值:butt——默认,平直的边缘;round——圆形线帽;square——正方形线帽
ctx.lineWidth=16;
ctx.stroke();
</script>
最后就是一些自己的一些总结和即将用到的属性:
textBaseline属性设置文字竖直对齐方式,设置或返回在绘制文本时的当前文本基线。可取属性值:top,hanging,middle,alphabetic,ideographic,bottom
rect() 方法为当前路径添加一个矩形子路径
rotate() 旋转画布的坐标系统;调用方式:rotate(angle);
angle 为旋转的弧度,正值表示顺时针方向旋转,负值表示逆时针方向旋转;
clip() 方法将当前的路径作为后面绘制操作的区域; 比如用arc画了圆之后,后面立即跟个clip函数,表示后面再有的操作都是在这个圆内;
createRadialGradient() 方法创建一条放射颜色渐变效果;参数(按顺序说明):x,y——开始圆的圆心坐标,radiusStart——开始圆的直径;xEnd,yEnd——结束圆的圆心坐标;radiusEnd——结束圆的直径
eg:
var rag=ctx.createRadialGradient(95,15,15,102,20,40);
rag.addColorStop(0,'#ff6721');
rag.addColorStop(0.8,'#091021');
rag.addColorStop(1,'rgba(0,123,232,0.2)');
//addColorStop()方法规定gradient对象中的颜色与位置;前面的参数表示渐变中开始与结束之间的位置,参数值介于0-1之间。后者则是在该位置显示的css颜色值
ctx.clearRect(0,0,300,300); //删除一个画布的矩形区域,清除某区域矩形画布,并以败诉作为填充背景
总结:绘制整个形状用fill()填充;绘制轮廓用stroke()