HTML5Canvas画图

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

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

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

基本HTML不说了，也就是搭一个架子，放一个

 
 
 
HTML5 Canvas DEMO 
 
 
 
 
 
 
 
 
 
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); 
 }

画出来的结果是：

HTML5 Canvas 画图

例子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(); 
    } 
 }

画出来的结果是：

HTML5 Canvas 画图

例子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(); 
 }

画出来的结果是：

HTML5 Canvas 画图

例子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(); 
    } 
}

画出来的结果是：

HTML5 Canvas 画图

例子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(); 
 }

画出来的结果是：

HTML5 Canvas 画图

新闻标题：HTML5Canvas画图
文章地址：http://chengdu.cdxwcx.cn/article/pcdjpe.html

甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

首页

网站建设

网站制作案例

解决方案

网站设计报价

网站制作动态

关于我们

联系我们

成都网站建设设计将想法与焦点和您一起共享

HTML5Canvas画图

canvas：放开你的梦想

其他资讯

html5开奖动画开奖播放器

android按钮响应 android按钮点击没反应

jquery给inp jquery给input赋值

css满足多个样式 css 同时指定多个类

ios技术和产品的开发苹果产品技术

甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

成都网站建设设计 将想法与焦点和您一起共享

HTML5Canvas画图

canvas：放开你的梦想

其他资讯

html5开奖动画 开奖播放器

android按钮响应 android按钮点击没反应

jquery给inp jquery给input赋值

css满足多个样式 css 同时指定多个类

ios技术和产品的开发 苹果产品技术

成都网站建设设计将想法与焦点和您一起共享

html5开奖动画开奖播放器

ios技术和产品的开发苹果产品技术