HTML5---canvas的5大用法

最新推荐文章于 2019-07-17 09:58:43 发布

Carrie_zzz

最新推荐文章于 2019-07-17 09:58:43 发布

阅读量435

点赞数 1

分类专栏：前端 HTML5合集文章标签： canvas 动画绘图 html5

本文链接：https://blog.csdn.net/Carrie_zzz/article/details/78112432

版权

前端同时被 2 个专栏收录

73 篇文章 0 订阅

订阅专栏

HTML5合集

1 篇文章 1 订阅

订阅专栏

canvas—绘制矩形（1）

HTML部分

<!DOCTYPE>
<html>
    <head lang="en">
        <meta charset="utf-8"/>
        <title>canvas绘制矩形</title>
        <style type="text/css">
        body{padding : 0;
        margin : 0;}

        </style>
        <script type="text/javascript" src="js/canvas.js"></script>
    </head>
    <body onload="draw('canvas')">
<canvas id="canvas" width ="400" height="300"> </canvas>
    </body>
</html>

js部分

function draw(id){
    var canvas=document.getElementById(id);
    var  context=canvas.getContext('2d');
    context.fillStyle="#000";
    context.strokeStyle="#f60";
    context.lineWidth=5;
    context.fillRect(0,0,400,300);
    context.strokeRect(50,50,180,120);
    context.strokeRect(110,110,180,120);

}

这里写图片描述

canvas—-绘制圆形（2）
角度换成弧度var radius=degree*Math.PI/180,这里的Math.PI表示的角度是180度。

html部分

<!DOCTYPE>
<html>
    <head lang="en">
        <meta charset="utf-8"/>
        <title>canvas绘制圆形</title>
            <script type="text/javascript" src="js/canvas.js"></script>
    </head>
    <body onload="draw('canvas')">
<canvas id="canvas" width ="400" height="400"> </canvas>
    </body>

</html>

js部分

function draw(id){
    var canvas=document.getElementById(id);
    var  context=canvas.getContext('2d');
    context.fillStyle="#f1f2f3";
    context.fillRect(0,0,400,400);
    for(var i=0;i<10;i++){
   context.beginPath();//绘制开始路径
   context.arc(25*i,i*25,i*10,0,Math.PI*2,true);
   context.closePath();//创建完成关闭 路径
   context.fillStyle="rgba(255,0,0,0.25)";
   context.fill();
    }
}

这里写图片描述
添加如下代码context.strokeStyle="#7FFFD4"; context.stroke();

canvas(3)—绘制文字

js部分

function draw(id){
    var canvas=document.getElementById(id);
    var context=canvas.getContext('2d');
    context.fillStyle='green';
    context.fillRect(0,0,800,300);//画矩形
    context.fillStyle='aquamarine';//设置字体颜色
    context.strokeStyle="#FF0000";//设置边框颜色
    context.font="bold 50px 微软雅黑";
    context.textBaseline="hanging";
    context.fillText('珍珍',20,20);//绘制文本
    context.strokeText('珍珍12345678909Z下次v围绕太阳还是第三方个不能形成我当初v234567',50,50,800);//最后一个参数是防止溢出
}

这里写图片描述

canvas(4)—保存文件

window.location=canvas.toDataURL('image/jpeg');

canvas(5)—动画

js部分

var i;
function draw(id){
    var canvas=document.getElementById(id);
    var context=canvas.getContext('2d');
  setInterval(paining,100);
  i=0;

function paining(id){
        context.fillStyle="greenyellow";
        context.fillRect(i,0,10,30);
    i=i+20;

      context.save();//保存当前绘图状态
}
}

Carrie_zzz

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5---canvas的5大用法

canvas—绘制矩形（1） HTML部分<!DOCTYPE><html> <head lang="en"> <meta charset="utf-8"/> <title>canvas绘制矩形</title> <style type="text/css"> body{padding : 0; margin
复制链接

扫一扫