使用HTML5画布:
一、第一步:使用canvas控件确定画布
二、第二步:使用javascript绘制图形
1、脚本标签
<script type="text/javascript">
</script>
2、步骤:
1)第一步:获取界面的画布
var canvas=document.getElementById("myCanvas");
document代表从整个文档中搜索;getElementById按照控件id来获取控件;var canvas定义一个变量来接收获取到的canvas控件
2)第二步:获取画布的上下文对象(相当于画笔)
var ctx=canvas.getContext("2d");
2D代表绘制图形为2D
3)第三步:绘制图形
a. 在图形的开始和结束需要:
ctx.beginPath();//开启路径
.....//绘制具体的操作
ctx.closePath();
b.绘制直线:
ctx.moveTo(20,20);//起点坐标:将上下文对象移动到40,40这个点
ctx.lineTo(50,40);//终点坐标:将上下文对象移动到100,40这个点
c.绘制矩形:
ctx.rect(90,40,40,30);//100,100是左上角坐标,80,50指宽度和高度
ctx.strokeStyle="red";//指定边框颜色
ctx.stroke();//实现方式:绘制边界
ctx.fillStyle="yellow";//填充内部颜色
ctx.fill();
//其他写法
ctx.strokeRect(90,80,40,30);//绘制空心的矩形
ctx.fillRect(100,120,60,50);//绘制实心矩形
d.绘制圆形
ctx.arc(100,180,20,0,Math.PI*2,false);
其中,100,180圆心坐标,20是半径,0,Math.PI*2画一个整圆;false代表顺时针方向画圆,true代表逆时针方向画圆,起点固定在三点钟方向,HTML5画圆的实现方式:
示例一:
<!doctype html>
<html>
<head>
<title>画布-canvas</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid red;"></canvas>
<!--以下代码代表使用JavaScript绘制图形-->
<script type="text/javascript">
//第一步:获取界面的画布
var canvas=document.getElementById("myCanvas");
//第二步:获取画布的上下文对象
var ctx=canvas.getContext("2d");
//第三步:绘制图形
//1、绘制直线
ctx.beginPath();//开启路径
ctx.moveTo(20,20);//起点坐标:将上下文对象移动到40,40这个点
ctx.lineTo(50,40);//终点坐标:将上下文对象移动到100,40这个点
//2、绘制三角形
ctx.lineTo(80,50);
ctx.lineTo(20,20);
ctx.stroke();//实现绘制
ctx.closePath();
//3、绘制矩形
ctx.beginPath();
ctx.rect(90,40,40,30);//100,100是左上角坐标,80,50指宽度和高度
ctx.strokeStyle="red";//指定边框颜色
ctx.stroke();//实现方式:绘制边界
ctx.fillStyle="yellow";//填充内部颜色
ctx.fill();
ctx.closePath();
//其他写法
ctx.beginPath();
ctx.strokeRect(90,80,40,30);//绘制空心的矩形
ctx.closePath();
ctx.beginPath();
ctx.fillRect(100,120,60,50);//绘制实心矩形
ctx.closePath();
//4、绘制圆形
ctx.beginPath();
ctx.arc(100,180,20,0,Math.PI*2,false);//100,180圆心坐标,20是半径,0,Math.PI*2画一个整圆
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(100,220,20,0,Math.PI,false);//100,220圆心坐标,20是半径,0,Math.PI*2画一个半圆
ctx.stroke();
ctx.closePath();//回到起点
ctx.beginPath();
ctx.arc(200,220,20,0,Math.PI,true);//100,220圆心坐标,20是半径,0,Math.PI*2画一个半圆
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>
效果如下:
示例2:实现笑脸
<!doctype html>
<html>
<head>
<title>画布-canvas</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid red;"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
//脸部
ctx.beginPath();
ctx.arc(100,100,60,0,Math.PI*2,false);
ctx.stroke();
ctx.closePath();
//嘴巴
ctx.beginPath();
ctx.arc(100,115,20,0,Math.PI,false);
ctx.closePath();
ctx.stroke();
//左眼睛
ctx.beginPath();
ctx.arc(80,85,12,0,Math.PI*2,false);
ctx.stroke();
ctx.closePath();
//左眼珠
ctx.beginPath();
ctx.arc(80,85,5,0,Math.PI*2,false);
ctx.stroke();
ctx.fillStyle="black";
ctx.fill();
ctx.closePath();
//右眼睛
ctx.beginPath();
ctx.arc(120,85,12,0,Math.PI*2,false);
ctx.stroke();
ctx.closePath();
//右眼珠
ctx.beginPath();
ctx.arc(120,85,5,0,Math.PI*2,false);
ctx.stroke();
ctx.fillStyle="black";
ctx.fill();
ctx.closePath();
</script>
</body>
</html>
效果如下:
三、画布实现艺术字的效果
方法如下:
<!doctype html>
<html>
<head>
<title>画布-canvas</title>
</head>
<body>
<canvas id="myCanvas" width="250" height="250" style="border:1px solid red;"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.font="26px 宋体";//设置字体
ctx.strokeText("青白江樱花节",10,50,150);//10,60为起点坐标;240代表字显示的宽度
//添加渐变颜色 蓝色-->黄色-->红色
//定义线性渐变,从左到右进行渐变,0,0指渐变的起点坐标,150,0是指渐变的终点坐标
var gradient=ctx.createLinearGradient(0,0,150,0);
gradient.addColorStop(0,"blue");
gradient.addColorStop(0.5,"yellow");
gradient.addColorStop(1,"red");
//使用渐变:把颜色设置为渐变
ctx.strokeStyle=gradient;
ctx.strokeText("青白江樱花节",10,100,150);
</script>
</body>
</html>
效果如下:
四、画布的特点
绘制成的图形网页上认为是一张图片,可以保存。