简单自学web前端——H5 canvas元素

HTML5——canvas元素

　　< canvas>是HTML5新增的元素，专门用来绘制图形的，很重要可以结合js制作出很多特效。

１、canvas绘制图形步骤
（1）创建一个canvas画布,指定id高度宽度。
< canvas id="canvas" width="500" height="500"></canvas>
（2）引入绘画脚本
< script type="" src="canvas.js"></script>
（3）使用draw函数进行绘画
< body onload="draw("canvas")">

　　练习例题：
　　

绘制一个矩形
（1）获取canvas元素  document.getElementById(id);
（2）获得上下文  getContext（'2d'）
（3）填充与绘制边框
（4）设置绘制样式
    fillstyle——填充颜色
    strokestyle——绘制边框颜色
（5）设置颜色值
（6）指定画笔的宽度   linewidth
（7）绘制图形
    context.fillRect（x，y，width，height）
    context.stroktRect（x，y，width，height）

代码：
H5
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>canvas元素</title>
    <script type="text/javascript" src="./canvas.js"></script>
</head>
<body onload="draw('canvas')">
    <canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

JS
function draw(id){
    var canvas = document.getElementById(id);
    var context = canvas.getContext('2d');
    //填充背景颜色
    context.fillStyle = "#000";
    context.fillRect(0,0,500,500); 
    //绘制矩形 
    context.strokeStyle = "#fff";
    context.lineWidth = 5;
    context.strokeRect(50,50,200,200);
}

效果截图：
这里写图片描述

绘制一个圆形
（1）开始创建路径
    context.beginPath（）
（2）创建圆形路径
    context.arc（x，y，radius，starAngle，endAngle，anticlockwise）
    x坐标，y坐标，半径，开始角度，结束角度，是否以顺时针绘制：True/False
（3）创建完成关闭路径
    context.closePath（）
（4）设置绘制样式，然后调用绘制方法进行绘制
    context.fill（）
    context.stroke（）

代码：
H5通上
JS：
function draw(id){
    var canvas = document.getElementById(id);
    var context = canvas.getContext('2d');
    //填充背景
    context.fillStyle = "#f1f2f3";
    context.fillRect(0,0,500,500);
    //正常绘制一个圆形
    //context.beginPath();
    //context.arc(20,20,10,0,Math.PI*2,true);
    //context.closePath();
    //context.fillStyle = "rgba(255,0,0,0.25)";
    //context.fill(); 

    //动画效果
    for(var i=0; i<10; i++){
        context.beginPath();
        context.arc(i*20,i*20,i*10,0,Math.PI*2,true);
        context.closePath();
        context.fillStyle = "rgba(255,0,0,0.25)";
        context.lineWidth = 5;
        context.fill(); 
    } 
}

效果截图：
这里写图片描述

绘制文字
    context.fillText("文本", x, y, [maxwidth])
    context.strokeText("文本", x, y, [maxwidth])
    maxwidth可选项，最大宽度，防止文字溢出。
    设置后若文字数量超出最大宽度，文字就会自动压缩。
（1）设置文字字体
    context.font="font_weight, font-size, font-family"
（2）设置文字垂直对齐方式
    context.textBaseline="Top"  这个值有很多种，一般就用top和hanging
（3）设置文字水平对齐方式
    context.textAlign="left"  这个值有很多种，一般就用left和start

代码
H5:同上
JS：
function draw(id){
    var canvas = document.getElementById(id);
    var context = canvas.getContext('2d');
    context.fillStyle = "green";
    context.fillRect(0,0,500,500);
    context.fillStyle = "#fff";
    context.font="bold 30px '宋体'";
    context.textBaseline = "top";
    context.textAlign = "left";
    context.fillText("这就是canvas元素", 20,20,500);
}

效果截图：
这里写图片描述

绘制动态图
在canvas画布中绘制动画来说是很简单的，实际上就是通过不断的变化坐标，擦除、重绘的过程。
（1）setInterval（code， millisec） 设置动画的间隔时间
    code是指执行动画的函数    间隔时间单位毫秒
（2）用来绘图的函数
    1）通过不断的变换x和y的坐标来实现动画的效果
    2）在改函数中先用clearRect方法将画布整体或者局部擦除
        context.clearRect（x，y，width，height）
js获取画布的高度和宽度
    width = canvas.width       height = canvas.height

代码：
H5：同上
JS：
var index;
var width,height;
var context;

function draw(id){
    var canvas = document.getElementById(id);
    context = canvas.getContext('2d');
    width = canvas.width;
    height = canvas.height;

    setInterval(code,100);
    index = 0;
}

function code(){
    context.fillStyle = "#f60";
    context.clearRect(0,0,width,height);
    context.fillStyle = "green";
    context.fillRect(index,20,10,10); 
    index=index+5;
}

希望能帮到大家。

简单自学web前端——H5 canvas元素

HTML5——canvas元素

猜你喜欢