瞬间觉得H5很强大可以绘制出很多很漂亮,很炫的效果。其实在android中onDraw也可以实现很多很炫的效果,比如Path类;其实编程语言是相通的,如果你会用android下View的相关绘制的API,可以借鉴到H5中,因为他们都是在canvas操作的,下面就是我学的第一个元素canvas(画布)的基本用法。
1、在页面中添加canvas元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas元素的使用</title>
</head>
<body>
<canvas id="myCanvas" style="border: 1px solid" height="300" width="500"></canvas>
</body>
</html>
这里我定义了一个高300xp,宽500px,带有边框的画布。
2、检测浏览器对canvas标签的支持(有两种方法)
方法一:在canvas标签内加上相关提示语,如果浏览器不支持canvas标签时就会显示下面的这段提示语
<canvas id="myCanvas" width="500" height="300" style="border: 2px solid">
您的浏览器不支持canvas标签,请你更新或更换浏览器!
</canvas>
方法二:判断context这个上下文是否存在进行判定,存在就支持canvas,不存在就不支持,因为所有的绘制方法都是基于context的
<canvas id="myCanvas" width="500" height="300" style="border: 2px solid">
您的浏览器不支持canvas标签,请你更新或更换浏览器!
</canvas>
<script type="text/javascript">
var mCanvas=document.getElementById("myCanvas");
if(mCanvas.getContext){
alert("您的浏览器支持Canvas标签");
}else{
alert("您的浏览器不支持Canvas标签");
}
</script>
3、canvas绘制常用的图形
首先要知道实心和空心的区别就是调用不同的方法 , 实心填充调取fillXXX相关的方法或属性 ,空心绘制调取stroke相关的方法或属性
(1)绘制直线
绘制直线主要用到两个方法: moveTo(x,y)和lineTo(x,y);
<!--绘制直线-->
<canvas id="myCanvas" width="500" height="300" style="border: 2px solid #ff53f1" ></canvas>
<script type="text/javascript">
var mContext = document.getElementById("myCanvas").getContext("2d");
mContext.strokeStyle="#ff53f1";
//从(0,0)点出发到(500,300)点结束
mContext.moveTo(0,0);
mContext.lineTo(500,300);
mContext.stroke();
</script>
(2)绘制矩形
strokeRect(x,y,w,h)和fillRect(x,y,w,h);是用来绘制矩形的方法,其中下x和y表示矩形左上角的坐标,w和h分别表示绘制矩形的宽和高。
<!--绘制矩形-->
<canvas id="myCanvas" width="500" height="300" style="border: 2px solid"></canvas>
<script type="text/javascript" >
var mContext=document.getElementById("myCanvas").getContext("2d");
/* mContext.fillStyle="rgb(39,145,200)";
mContext.fillRect(0,0,500,300);*/
mContext.strokeStyle="#ff0000"
mContext.strokeRect(10,10,300,200);
</script>
H5中颜色值得不同表示形式:十六进制,rgb(0-255),英文单词,百分比
<!--绘制矩形 各种颜色色值得不同表示方式-->
<!--<canvas id="myCanvas" width="500" height="300" style="border: 2px solid #ff53f1"></canvas>
<script type="text/javascript">
var mContext = document.getElementById("myCanvas").getContext("2d");
mContext.fillStyle = "#ff53f1";
mContext.fillRect(0, 0, 400, 250);
mContext.fillStyle = "red"
mContext.fillRect(10, 10, 410, 260);
mContext.fillStyle = "rgb(200,152,99)";
mContext.fillRect(20, 20, 420, 270);
mContext.fillStyle = "rgb(10%,35%,60%)";
mContext.fillRect(30, 30, 430, 280);
</script>-->
(3)绘制圆形或弧形
beginPath();
arc(x,y,radius,startAngle,endAngle,b)
closePath();
beginPath和closePath组合实现封闭的路径,如果绘制完成的时候不调用 closePath(),那么图形就不会 形成闭合(在绘制空心图形的时候才能体现出来)。
mContext.beginPath();
mContext.arc(250, 150, 150, 0, Math.PI * 2/3, true);
mContext.stroke();
arc用来画弧度,x和y用来确定圆心,startAngle和endAngle分别表示起始的角度值,b是一个boolean值,表示是否按顺时钟绘制。
<!--绘制圆形-->
<canvas id="myCanvas" width="500" height="300" style="border: 2px solid #ff53f1"></canvas>
<script type="text/javascript">
var mContext = document.getElementById("myCanvas").getContext("2d");
/*实心圆*/
mContext.fillStyle = "#ff53f1";
mContext.beginPath();
mContext.arc(250, 150, 75, 0, Math.PI * 2, true);
mContext.closePath();
mContext.fill();
/*虚心圆*/
mContext.strokeStyle="rgb(205,90,255)";
mContext.beginPath();
mContext.arc(250, 150, 150, 0, Math.PI * 2, true);
mContext.closePath();
mContext.stroke();
</script>
弧形是圆的一部分,所以我们通过改变结束的角度endAngle,就可以控制图形的具体形状
(4)绘制三角形
三角形的绘制原理就是通过beginPath()和closePath()实现路径闭合,moveTo和lineTo实现三条边的绘制。
<!--绘制三角形-->
<canvas id="myCanvas" width="500" height="300" style="border: 2px solid #ff134f"></canvas>
<script type="text/javascript">
var mContext = document.getElementById("myCanvas").getContext("2d");
mContext.fillStyle="#ff143f";
mContext.beginPath();
mContext.moveTo(10,10);
mContext.lineTo(490,10);
mContext.lineTo(100,300);
mContext.closePath();
mContext.fill();
</script>
(5)绘制贝塞尔曲线
用moveTo(x0,y0)和quadraticCurveTo(cpx,cpy,x,y)绘制二阶贝塞尔曲线。
(x0,y0)表示起点,(cpx,cpy)表示支撑点,(x,y)表示终点
<!--绘制二次方贝塞尔曲线-->
<canvas id="myCanvas" style="border: 1px solid #4260ff" height="300" width="500"></canvas>
<script type="text/javascript">
var mContext=document.getElementById("myCanvas").getContext("2d");
mContext.strokeStyle="#42f0fe";
mContext.moveTo(0,300);
mContext.quadraticCurveTo(100,100,400,275);
mContext.stroke();
mContext.globalCompositeOperation='source-over'
/*绘制直线用于表示二次贝塞尔曲线的控制点和控制线*/
mContext.strokeStyle="#42f0fe";
mContext.moveTo(0,300);
mContext.lineTo(100,100);
mContext.moveTo(100,100);
mContext.lineTo(400,275);
mContext.stroke();
</script>
三次贝塞尔曲线 bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y),就是多了(cpx2,cpy2)一个支撑点。
<!--绘制三次方贝塞尔曲线-->
<canvas id="myCanvas" style="border: 1px solid #4260ff" height="300" width="500"></canvas>
<script type="text/javascript">
var mContext=document.getElementById("myCanvas").getContext("2d");
mContext.strokeStyle="#ff0f00";
mContext.moveTo(0,300);
mContext.bezierCurveTo(100,100,110,120,400,295);
mContext.stroke();
mContext.globalCompositeOperation='source-over'
/*绘制直线用于表示三次贝塞尔曲线的控制点和控制线*/
mContext.strokeStyle="#42f0fe";
mContext.moveTo(100,100);
mContext.lineTo(0,300);
mContext.moveTo(110,120);
mContext.lineTo(400,295);
mContext.stroke();
</script>
(6)绘制文字和螺旋状图案
fillText(text,x,y,maxWidth)和strokeText(text,x,y,maxWidth)用来绘制文字。
- text:绘制的文本
- (x,y)绘制的坐标
- maxWidth绘制的最大宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现螺旋状图案</title>
<script language="javascript">
function draw(){
mContext.translate(200,20);
for(var i=0;i<80;i++){
mContext.save();//保存绘制状态
mContext.translate(30,30);
mContext.scale(0.95,0.95);
mContext.rotate(Math.PI/12);
mContext.beginPath();
switch (i%3){
case 0:
mContext.fillStyle="red";
break;
case 1:
mContext.fillStyle="blue";
break;
case 2:
mContext.fillStyle="green";
break;
}
mContext.globalAlpha="0.4";
mContext.arc(0,0,50,0,Math.PI*2,true);
mContext.closePath();
mContext.fill();
}
}
window.onload=function(){
draw();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="350" height="300" style="background:#e41aff ;border: 2px solid #2922ff " ></canvas>
<script type="text/javascript">
var mContext=document.getElementById("myCanvas").getContext("2d");
mContext.font="italic 25px 微软雅黑";
mContext.fillStyle="yellow";
mContext.fillText("HTML5效果好炫",0,25);
mContext.font="italic 25px 微软雅黑";
mContext.strokeStyle="#000000";
mContext.strokeText("HTML5效果好炫",5,70);
</script>
</body>
</html>
看到translate,scale,rotate我们会想到android中的补间动画。
(7)清空画布
最后我们来清空画布,调用clearRect,其实就是清除一个矩形。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清空画布</title>
<script type="text/javascript">
function clearMap(){
mContext.clearRect(0,0,500,300);
}
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="300" style="border: 2px solid #ff134f"></canvas>
<script type="text/javascript">
var mContext = document.getElementById("myCanvas").getContext("2d");
mContext.strokeStyle="#f6143f";
mContext.beginPath();
mContext.moveTo(10,10);
mContext.lineTo(250,300);
mContext.lineTo(490,10);
mContext.closePath();
mContext.stroke();
</script>
<input type="button" value="清空画布" onclick="clearMap()">
</body>
</html>