使用HTML5画布

使用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>

效果如下：

四、画布的特点

绘制成的图形网页上认为是一张图片，可以保存。

猜你喜欢