Canvas 系列一

来源：互联网发布：知已图片编辑：程序博客网时间：2024/05/17 04:04

HTML5最受欢迎的功能当属<canvas>元素

先看一下它的支持性

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <canvas> 标签。

注释：Internet Explorer 8 以及更早的版本不支持 <canvas> 标签。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        /*css3中水平垂直居中方法*/        #drawing {            position: absolute;            top: 50%;            left: 50%;            transform: translate(-50%, -50%);        }    </style></head><body><canvas id="drawing" width="400" height="400"></canvas><script>    var drawing = document.getElementById("drawing");    if (drawing.getContext) {        var context = drawing.getContext("2d");        //开始路径        context.beginPath();        //绘制外圆        context.arc(200, 200, 190, 0, 2 * Math.PI, false);        //绘制内圆        context.moveTo(382, 200);        context.arc(200, 200, 182, 0, 2 * Math.PI, false);        //变换原点        context.translate(200, 200);        //旋转表盘        //context.rotate(1);        //绘制时针        context.moveTo(0, 0);        context.lineTo(0, -165);        //绘制分针        context.moveTo(0, 0);        context.lineTo(-125, 0);        //描边路径        var gradient = context.createLinearGradient(0, 0, 360, 0);        gradient.addColorStop(0, "magenta");        gradient.addColorStop(0.5, "blue");        gradient.addColorStop(1.0, "red");        // 用渐变进行填充        context.strokeStyle = gradient;        context.lineWidth = 5;        context.stroke();        context.font = "bold 24px Arial";        context.textAlign = "center";        context.textBaseline = "middle";        context.fillText("12", 0, -165);    }</script></body></html>

0 0