HTML5中的Canvas

最新推荐文章于 2022-04-27 09:07:21 发布

张文琪2024

最新推荐文章于 2022-04-27 09:07:21 发布

阅读量517

点赞数 1

分类专栏： JavaWeb 文章标签： html5 canvas 画矩形画圆动画

本文链接：https://blog.csdn.net/zhengyikuangge/article/details/52125390

版权

JavaWeb 专栏收录该内容

57 篇文章 1 订阅

订阅专栏

1.创建Canvas：

一般在页面上写入Canvas元素，使用js代码创建Canvas。

网页代码：

<body onload="draw('canvas');">
<canvas id="canvas" width="500" height="350"></canvas>
</body>

js代码：


var context;
function draw(id){
    //获取canvas组件的对象
    var canvas=document.getElementById(id);
    //获取上下文对象，执行画的动作
    context=canvas.getContext('2d');

    ...
    }

注：别忘了导入js文件

2.画矩形：

var context;
function draw(id){
    //获取canvas组件的对象
    var canvas=document.getElementById(id);
    //获取上下文对象，执行画的动作
    context=canvas.getContext('2d');


    //填充颜色
    context.fillStyle="green";
    //边框颜色
    context.strokeStyle="#fff";
    context.lineWidth=5;
    //画一个带填充颜色的矩形，四个参数分别为 X坐标，Y坐标，宽，高
    context.fillRect(0,0,400,300);
    //画一个不带填充颜色的矩形，四个参数分别为 X坐标，Y坐标，宽，高
    context.strokeRect(50,50,120,80);
    }

3.画圆：

var context;
function draw(id){
    //获取canvas组件的对象
    var canvas=document.getElementById(id);
    //获取上下文对象，执行画的动作
    context=canvas.getContext('2d');
    for(var i=0;i<10;i++){
        //开始绘制路径
        context.beginPath();
        //正在绘制,五个参数说明：圆点X坐标，圆点Y坐标，垂直坐标，开始角度，结束角度
        //是否逆时针
        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();

        context.strokeStyle="rgba(255,0,0,0.25)";
        //绘制不填充圆
        context.stroke();
    }
}

4.写字：

var context;
function draw(id){
    //获取canvas组件的对象
    var canvas=document.getElementById(id);
    //获取上下文对象
    context=canvas.getContext('2d');
    //字型  大小  字体
    context.font="bold 40px '微软雅黑'";
    //垂直对齐方式
    context.textBaseline='middle';
    //水平对齐方式
    context.textAlign='start';
    context.fillStyle='#fff';
    // 后两个参数表示位置，三个参数分别是要显示的内容，X坐标，Y坐标
    context.fillText('正义狂哥',0,0);
    context.strokeText('正义狂哥',0,40);
}

注：
1、fillText，strokeText还有最后一个参数，可用来防止文字溢出
2、textBaseline属性图解：

这里写图片描述

3、textAlign属性图解：

这里写图片描述

5.动画：

动画只是把静态的图形通过java代码动起来而已

动画中常用的方法：

1.setInterval：

间隔一定时间执行某个方法
例如：

setInterval(painting,100);
/*间隔100毫秒执行painting方法*/

2.clearRect:

清除某一区域所画的
例如：

context.clearRect(0,0,500,350);
//画一个以左上角坐标为（0.0），宽500，高300的橡皮，然后擦除这块区域

动画小案例：

var i;
var context;
function draw(id){
    //获取canvas组件的对象
    var canvas=document.getElementById(id);
    //获取上下文对象
    context=canvas.getContext('2d');
    context.fillStyle="green";
    context.fillRect(0,0,10,10);
    setInterval(painting,100);
    i=0;

}

function painting(){
    context.fillStyle="green";
    context.fillRect(i,0,10,10);
    i+=20;
    if(i>500){
        context.clearRect(0,0,500,350);
        i=0;
    }
}

张文琪2024

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5中的Canvas

创建Canvas画矩形画圆写字动画动画中常用的方法setIntervalclearRect1.创建Canvas：一般在页面上写入Canvas元素，使用js代码创建Canvas。网页代码：<body onload="draw('canvas');"><canvas id="canvas" width="500" height="350"></canvas></body>js代码：v
复制链接

扫一扫

专栏目录