首页 > 代码库 > HTML5—canvas绘制图形(1)

HTML5—canvas绘制图形(1)

1、canvas基础知识

 

canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“画布”,我们可以利用js脚本在“画布”上绘制图形。

 

1.1canvas元素

 

在利用canvas绘制图形之前,我们首先需要在页面中放置一个canvas元素,如下代码:

<canvas id="mycanvas" width="400" height="400">您的浏览器out了</canvas>

 说明:(1)放置canvas元素首先需要指定ID,widht,height三个属性,其中宽度跟高度只能通过这种方式指定,不可以通过css样式指定

    (2)canvas标签里面的内容只有当浏览器不兼容canvas时,才会显示,当浏览器兼容canvas时,该内容将不显示,只显示绘制的内容

 

1.2画图环境

 

Canvas.getContext(contextID)

说明(1)contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d",它指定了二维绘图。

   (2)getContext() 方法会返回一个对象,这个对象给我们封装了很多的绘图方法和属性

 

1.3颜色的表示方式

 

  • 颜色名称:"red" "green" "blue"
  •  十六进制颜色值: "#FFFFFF"
  •  三色值:rgb(1-255,1-255,1-255)
  •  四色值:rgba(1-255,1-255,1-255,透明度)

 

1.4坐标系统

 

canvas坐标系是一个二维的平面。原点坐标(0,0)在canvas画布的左上角位置上,沿着水平向右方向是x轴正方向,垂直方向为y轴正方向

 

 2、使用canvas绘制矩形

 

2.1 矩形API

  1. rect()    创建矩形
  2. fillRect()   绘制‘被填充’矩形
  3. strokeRect  绘制无填充矩形

参数说明:

  • x:矩形起点的横坐标
  • y:矩形起点的纵坐标
  • width:矩形的长度
  • height:矩形的宽度

 

2.2图形修饰

 

2.2.1颜色样式,阴影的方法和属性

 

技术分享

 

技术分享

部分方法属性使用说明:

  •  createLinearGradient(xStart,yStart,xEnd,yEnd):该方法使用4个参数,xStart为渐变起始点的横坐标,yStart为渐变起始点的纵坐标,xEnd为渐变结束点的横坐标,yEnd为渐变结束点的纵坐标

  • addColorStop(offset,color):在使用createLinearGradient方法创建了一个使用两个坐标点的对象之后,还需要使用addColorStop方法对渐变的颜色进行设定,offset为所设定的颜色离开渐变起始点的偏移量,该参数是一个范围在0-1之间的浮点值i,渐变起始点的偏移量为0,渐变结束点的偏移量为1,下面用一个图形来说明这个参数(该图示是一个由蓝色变为白色再由白色渐变到红色的过程)

技术分享

 

 

2.3开始绘制矩形

2.3.1绘制一个填充单一背景色的矩形

step1:在页面中放置一个canvas元素

<canvas id="mycanvas" width="400" height="400">您的浏览器out了</canvas>

step2:取得canvas元素

var mycanvas=document.getElementById(‘mycanvas‘);

step3:获取绘图环境

var context=canvas.getContext(‘2d‘);

step4:设定绘图样式

用canvas绘制图形的时候,有两种方式——填充(fill)与绘制边框(stroke),填充是指填满图形内部,绘制边框是指不填满图形内部只绘制图形的外框,canvas元素结合使用者两种方式来绘制图形

context.fillStyle=‘red‘; //fillStyle设置填充颜色context.strokeStyle=‘blue‘; //strokeStyle设置边框颜色context.lineWidth=3; //lineWidth设置图形边框的宽度

step5:开始绘制矩形

canvas分别使用fillRect方法与strokeRect方法来填充矩形和绘制矩形的边框

context.fillRect(50,50,100,100);context.strokeRect(50,50,100,100);

 

效果预览:

技术分享

 

 2.3.2绘制一个线性渐变的矩形

step1:在该实例中,我们将直接从绘制矩形开始讲,设置矩形样式

context.strokeStyle=‘blue‘; //strokeStyle设置边框颜色context.lineWidth=3; //lineWidth设置图形边框的宽度var oColor=context.createLinearGradient(0,0,150,0); //创建一个线性渐变对象oColor.addColorStop(0,‘red‘);   //渐变由红色开始oColor.addColorStop(1,"white");  //过渡到白色context.fillStyle=oColor;   //将矩形的样式设置成线性渐变

step2:开始绘制矩形

context.strokeRect(50,50,100,100);context.fillRect(50,50,100,100);

step3:完整代码

var mycanvas=document.getElementById(‘mycanvas‘); //获取canvas对象
var context=mycanvas.getContext(‘2d‘); //getContext会返回一个对象,这个对象封装了很多绘图的属性和方法 context.strokeStyle=‘blue‘; //strokeStyle设置边框颜色context.lineWidth=3; //lineWidth设置图形边框的宽度var oColor=context.createLinearGradient(0,0,150,0); //创建一个线性渐变对象oColor.addColorStop(0,‘red‘); //渐变由红色开始oColor.addColorStop(1,"white"); //过渡到白色context.fillStyle=oColor; //将矩形的样式设置成线性渐变context.strokeRect(50,50,100,100);context.fillRect(50,50,100,100);

step4:效果预览

技术分享

 

2.3.3绘制一个带阴影的矩形

step1:设置矩形样式以及阴影样式

context.fillStyle=‘red‘; //设置矩形的填充颜色context.shadowBlur=20;  //设置阴影的模糊级别context.shadowColor=‘black‘; //设置阴影的颜色

step2:开始绘制矩形

context.fillRect(50,50,100,100);

step3:完整代码

var mycanvas=document.getElementById(‘mycanvas‘); //获取canvas对象var context=mycanvas.getContext(‘2d‘);  //getContext会返回一个对象,这个对象封装了很多绘图的属性和方法context.fillStyle=‘red‘; //设置矩形的填充颜色context.shadowBlur=20;  //设置阴影的模糊级别context.shadowColor=‘black‘; //设置阴影的颜色context.fillRect(50,50,100,100);

效果预览:

技术分享

 

HTML5—canvas绘制图形(1)