html5 canvas基本用法

Posted 龍飛鳯舞

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html5 canvas基本用法相关的知识,希望对你有一定的参考价值。

通过对canvas的初步了解,经过几天的总结,吧canvas的基本用法总结如下:方便以后查阅

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas 使用实例</title>
</head>

<body style="padding:0; margin:0;" onLoad="draw()">

<canvas width="150" height="150" style=" border:1px solid #ccc;" id="canvas"></canvas>

<script type="text/javascript">
function draw(){
    var canvas = document.getElementById("canvas");//获取canvas元素
    var ctx = canvas.getContext("2d");//定义canvas场景
    
/**基本形状的绘制**/
    //绘制矩形
    ctx.fillStyle = "rgb(200,0,0)";//填充颜色
    ctx.fillRect(0,0,55,50);//绘制图形
    ctx.fillStyle = "rgba(0,0,200,0.5)";//填充颜色带透明度
    ctx.fillRect(30,30,55,50);//绘制图形
    ctx.clearRect(30,30,55,50);//绘制空白的矩形
    ctx.strokeRect(30,30,55,50);//绘制带边框的矩形
    
    //按路径绘制图形
    ctx.beginPath();//开始路径绘图
    ctx.moveTo(75,50);//笔触起点
    ctx.lineTo(100,75);//画直线
    ctx.lineTo(100,25);//画直线
    ctx.lineTo(75,50);//画直线(其实已经回到了起点)
    ctx.closePath();//关闭路径(不关闭也可以,在填充的时候回字段闭合路径)
    ctx.fill();//填充路径
    
    //使用路径绘制一个笑脸(主要用到圆形画法)
    ctx.beginPath();
    ctx.arc(75,75,50,0,Math.PI*2,true);//ctx.arc(圆心横坐标,圆心纵坐标,半径,起始角度,终止角度,顺时针);
    ctx.moveTo(110,75);
    ctx.arc(75,75,35,0,Math.PI,false);
    ctx.moveTo(65,65);
    ctx.arc(60,65,5,0,Math.PI*2,true);
    ctx.moveTo(95,65);
    ctx.arc(90,65,5,0,Math.PI*2,true);
    ctx.stroke();
    
    //用路径画矩形
    ctx.rect(75,75,50,50);
    ctx.stroke();

    //贝塞尔曲线,二次贝塞尔曲线,三次贝塞尔曲线..........
    
/**样式与色彩**/
    //填充颜色与轮廓颜色
    ctx.rect(75,75,50,50);
    ctx.fillStyle = "rgb(200,0,0)";//填充颜色
    ctx.fill();
    ctx.strokeStyle = "orange";//轮廓颜色orange/#FFA500/rgb(255,165,0)/rgba(255,165,0,1)
    ctx.stroke();
    
    //画一个渐变效果的四色格
    ctx.fillStyle = #FD0;
    ctx.fillRect(0,0,75,75);
    ctx.fillStyle = #6C0;
    ctx.fillRect(75,0,75,75);
    ctx.fillStyle = #09F;
    ctx.fillRect(0,75,75,75);
    ctx.fillStyle = #F30;
    ctx.fillRect(75,75,75,75);
    ctx.fillStyle = "#FFF";//填充颜色设置成白色
    ctx.globalAlpha = 0.2;//设置透明度
    for(var i=0;i<7;i++){
        ctx.beginPath();
        ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
        ctx.fill();    
    }
    
    //画4个带有渐变的矩形
    ctx.fillStyle = rgb(255,221,0);
    ctx.fillRect(0,0,150,37.5);
    ctx.fillStyle = rgb(102,204,0);
    ctx.fillRect(0,37.5,150,37.5);
    ctx.fillStyle = rgb(0,153,255);
    ctx.fillRect(0,75,150,37.5);
    ctx.fillStyle = rgb(255,51,0);
    ctx.fillRect(0,112.5,150,37.5);
    for(var i=0;i<10;i++){
        ctx.fillStyle = rgba(255,255,255,+(i+1)/10+‘)‘;
        for(var j=0;j<4;j++){
            ctx.fillRect(5+i*14,5+j*37.5,14,27.5);
        }
    }
    
/**绘制文本**/
    ctx.font = "24px serif";//设置文本样式:font/textAlign/textBaseline/direction     文本测量
    ctx.fillText("Hello Word",10,50);//实心文字
    ctx.strokeText("Hello Word",10,50);//空心文字
    
/**强大的处理图片**/
    //引入背景图片,并且以该图片作为背景进行绘图
    var img = new Image();
    img.onload = function(){
        ctx.drawImage(img,0,0);//处理图像 0 0处开始绘制图像
          ctx.beginPath();
          ctx.moveTo(30,96);
          ctx.lineTo(70,66);
          ctx.lineTo(103,76);
          ctx.lineTo(170,15);
          ctx.stroke();
    };
    img.src = "1.jpg";//引入图像的位置
    
    //对图片进行缩放 比例不等
    var img = new Image();
    img.onload = function(){
        ctx.drawImage(img,0,0,150,150);
    };
    img.src = 1.jpg;
    
/**变形**/
    //save 与 restore 图像的样式保存于内存(数据是以"堆"的方式保存到内存里面)
    ctx.fillRect(0,0,150,150);
    ctx.save();
    ctx.fillStyle = #09F;
    ctx.fillRect(15,15,120,120);
    ctx.save();
    ctx.fillStyle = #FFF;
    ctx.globalAlpha = 0.5;
    ctx.fillRect(30,30,90,90);
    ctx.restore();
    ctx.fillRect(45,45,60,60);//注意样式
    ctx.restore();
    ctx.fillRect(60,60,30,30);//注意样式
    
    //移动 translate 移动基准点
    ctx.fillRect(0,0,50,50);
    ctx.translate(50,50);
    ctx.fillRect(0,0,50,50); 
    
    //还有旋转/缩放/变形 等更多操作,有待深入研究

/**更多高级操作请访问:https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_usage**/
}
</script>
</body>
</html>

 

以上是关于html5 canvas基本用法的主要内容,如果未能解决你的问题,请参考以下文章

HTML5 Canvas 支持和 Android Webview

HTML5 Canvas基本绘制线条教程

《JavaScript高级程序设计》Chapter 15 canvas + Chapter 16 HTML5

cavas总结

canvas

html5 两个canvas重叠放在一个div里面,每个canvas各填充一张图片,代码怎么写?