HTML5Canvas画图

 按照官方例子画了几个基本图形,算是对于HTML5 Canvas有所了解，但是感觉这里面数学知识太忘记了，虽然以前数学竞赛出身，但是好多年不用了，有所遗忘。

昌邑网站建设公司创新互联,昌邑网站设计制作，有大型网站制作公司丰富经验。已为昌邑近1000家提供企业网站建设服务。企业网站搭建\外贸营销网站建设要多少钱，请找那个售后服务好的昌邑做网站的公司定做！

HTML5的canvas元素只是提供了一个画布，而实际的绘制工作由javascript来完成。

基本HTML不说了， 也就是搭一个架子，放一个元素，然后首部引入一些javascript文件，这里面每一个js文件都是一个画图的例子.

 
 
 
 
 
 
 
 
 
 
 
 
 
canvas：放开你的梦想
 
 


 

例子1：绘制矩形

/** 
 *  This file is confidential by Charles.Wang 
 *  Copyright belongs to Charles.wang 
 *  You can make contact with Charles.Wang (charles_wang888@126.com) 
 */ 
  
 //这段js代码用于画一个长方形 
 //参数是传进来的画布canvas的id,表明这段代码画在哪里 
 function drawRect(id){ 
     
    //取得canvas对象，也就是我们js代码要画的canvas对象 
    var canvas=document.getElementById('canvas'); 
    if (canvas==null) 
        return false; 
         
    //从canvas取得图形上下文，这个图形上下文context封装了许多绘画方法，这是一个内置的html5对象 
    var context=canvas.getContext('2d'); 
    //设定好当前图形上下文的样式，夜就是当前使用颜色来绘制图形，此外还有一些其他的样式 
    context.fillStyle="#0044FF"; 
    //fillXXX用来填充图形的内部，这里fillRect，表明用当前颜色填充图形内部，4个参数分别为起点横坐标/起点纵坐标/宽度/高度 
    context.fillRect(0,0,400,300); 
    //颜色值既可以用十六进制命名，也可以使用颜色名 
    context.fillStyle="red"; 
    context.strokeStyle="blue"; 
    //用于设置图形边框的宽度 
    context.lineWidth=1; 
    context.fillRect(50,50,100,100); 
    //strokeXXX用来描述图形的边框(stroke),这里strokeRect，表明用来绘制刚才矩形的边框 
    context.strokeRect(50,50,100,100); 
 } 

画出来的结果是：

例子2：用Path来绘制一组圆形：

/** 
 *  This file is confidential by Charles.Wang 
 *  Copyright belongs to Charles.wang 
 *  You can make contact with Charles.Wang (charles_wang888@126.com) 
 */ 
  
 function drawPath(id){ 
     
    var canvas=document.getElementById(id); 
    if(canvas == null) 
        return false; 
     
    //依旧先拿到canvas对象和上下文对象 
    var context = canvas.getContext("2d"); 
    //先绘制画布的底图 
    context.fillStyle="#EEEEEF"; 
    context.fillRect(0,0,400,300); 
     
    //用循环绘制10个圆形 
    var n = 0; 
    for(var i=0 ;i<10;i++){ 
        //开始创建路径，因为要画圆，圆本质上也是一个路径，这里向canvas说明，我要开始画了，这是起点 
        context.beginPath(); 
        //画一个拱形(arcade)，因为圆是一种特殊的拱形 
        //6个参数分别是 起点横坐标，起点纵坐标，圆的半径，起始弧度，结束弧度（2PI刚好是360度），是否顺时针 
        context.arc(i*25,i*25,i*10,0,Math.PI*2,true); 
        //关闭路径 
        context.closePath(); 
        context.fillStyle="rgba(255,0,0,0.25)"; 
        //填充刚才所画的圆形 
        context.fill(); 
    } 
 } 

 画出来的结果是：

例子3：绘制直线，并且用直线组合复杂图形

/** 
 *  This file is confidential by Charles.Wang 
 *  Copyright belongs to Charles.wang 
 *  You can make contact with Charles.Wang (charles_wang888@126.com) 
 */ 
  
 function drawLine(id){ 
     
    var canvas=document.getElementById(id); 
    if(canvas==null) 
    return false; 
    var context = canvas.getContext('2d'); 
    context.fillStyle="#FF00FF"; 
    context.fillRect(0,0,400,300); 
     
    var n=0; 
    var dx=150; 
    var dy=150; 
    var s = 100; 
    context.beginPath(); 
    context.fillStyle='rgb(100,255,100)'; 
    context.strokeStyle='rgb(0,0,100)'; 
    var x = Math.sin(0); 
    var y = Math.cos(0); 
    var dig=Math.PI/15*11; 
    for(var i = 0;i<30;i++){ 
        var x = Math.sin(i*dig); 
        var y = Math.cos(i*dig); 
        //用三角函数计算顶点 
        context.lineTo(dx+x*s,dy+y*s); 
    } 
    context.closePath(); 
    context.fill(); 
    context.stroke(); 
 } 

画出来的结果是：

例子4：使用线性渐变

/** 
 *  This file is confidential by Charles.Wang 
 *  Copyright belongs to Charles.wang 
 *  You can make contact with Charles.Wang (charles_wang888@126.com) 
 */ 
  
 //渐变用于填充，是指填充图形时从某种颜色慢慢过渡到另外一种颜色 
 //线性渐变是指在一个线段之间进行渐变，线段上每个点随着离开起点的位移值的变化，其颜色也在变化 
function drawLinearGradient(id){ 
     
    var canvas = document.getElementById(id); 
    if(canvas==null) 
    return false; 
     
    //我们还是先绘制底图，这次，我们的底图也用了渐变 
    var context = canvas.getContext('2d'); 
    //第一个渐变，用于底图，它调用了createlinearGradient创建了一个渐变 
    //4个参数分别为起点的横坐标,起点的纵坐标，结束点的横坐标，结束点的纵坐标，所以本例就是从(0,0)到(0,300)，所以是一个竖直向下的渐变 
    var gradient1=context.createLinearGradient(0,0,0,300); 
    //addColorStop可以设置渐变的颜色，第一个参数表示偏移量（0-1）之间，第二个参数表示颜色 
    //所以，我们定义了从×××到蓝色的渐变 
    gradient1.addColorStop(0,'rgb(255,255,0)'); 
    gradient1.addColorStop(1,'rgb(0,255,255)'); 
    //将上下文对象关联到当前的渐变设定作为填充风格 
    context.fillStyle=gradient1; 
    //用我们定义的渐变来绘制底图 
    context.fillRect(0,0,400,300); 
     
    var n = 0; 
    //这次我们要画一组圆圈，我们定义一个从(0,0)到(300,0)也就是水平方向从左到右的渐变 
    var gradient2=context.createLinearGradient(0,0,300,0); 
    //设置渐变色的起始颜色和终止颜色 
    gradient2.addColorStop(0,'rgba(0,0,255,0.5'); 
    gradient2.addColorStop(1,'rgba(255,0,0,0.5)'); 
    //用循环画圆，并且用渐变色填充 
    for(var i=0;i<10;i++){ 
        context.beginPath(); 
        context.fillStyle=gradient2; 
        context.arc(i*25,i*25,i*10,0,Math.PI*2,true); 
        context.closePath(); 
        context.fill(); 
    } 
} 

画出来的结果是：

例子5：图形基本变换（平移，缩放，旋转）

/** 
 *  This file is confidential by Charles.Wang 
 *  Copyright belongs to Charles.wang 
 *  You can make contact with Charles.Wang (charles_wang888@126.com) 
 */ 
  
  
 //这个函数用于演示一些常用的坐标变换 
 //常见的坐标变换有平移，缩放，旋转 
 function drawTransformShape(id){ 
     
    var canvas = document.getElementById(id); 
    if(canvas == null)  
        return false; 
    //画底图 
    var context = canvas.getContext('2d'); 
    context.fillStyle="#FF00FF"; 
    context.fillRect(0,0,400,300); 
     
    //移动坐标轴的原点，因为这里向右边平移了200，向下移动了50，所以水平方向是居中了 
    context.translate(200,50); 
     
    //循环可以画一系列的五角星 
    for(var i=0;i<50;i++){ 
        //每次坐标轴的原点往右下各移动25像素 
        context.translate(25,25); 
        //并且每次进行缩放到0.95倍 
        context.scale(0.95,0.95); 
        //然后把这个图形进行旋转，每次转动+18度（也就是顺时针） 
        context.rotate(Math.PI/10); 
        //然后在当前位置画一个五角星 
        create5star(context); 
        //并且填充当前五角星 
        context.fill(); 
    } 
     
 } 
  
  
 //这个函数用于绘制一个五角星 
 function create5star(context){ 
    var n = 0; 
    var dx = 100; 
    var dy = 0 ; 
    var s = 50; 
    //创建路径 
    context.beginPath(); 
    context.fillStyle="rgba(255,0,0,0.5)"; 
    var x = Math.sin(0); 
    var y= Math.cos(0); 
    var dig = Math.PI/5 *4; 
    //画五角星的五条边 
    for(var i = 0;i<5;i++){ 
        var x = Math.sin(i*dig); 
        var y = Math.cos(i*dig); 
        context.lineTo(dx+x*s,dy+y*s); 
    } 
    context.closePath(); 
 } 
  
  

画出来的结果是：