canvas

<div><image id="box" src="https://www.baidu.com/img/flexible/logo/pc/result.png"></div>

<canvas id="kkk" width="400" height="400"></canvas>

 

let box = document.getElementById('box');
let kkk = document.getElementById('kkk');//获取元素

if(kkk.getContext){//确保支持
    let context = kkk.getContext("2d");//获取2D对象

    context.fillStyle = "rgba(255,0,0,0.5)"//填充颜色，可用rgba透明度
    context.fillRect(10,10,100,100)//填充绘制（x，y，宽，高）

    context.strokeStyle = "#0000ff"//描边颜色
    context.strokeRect(10,10,100,100)//描边绘制（x，y，宽，高）

    context.clearRect(50,50,20,20)//擦除一个矩形区域（x，y，宽，高）
     
    context.beginPath();//开始绘制新路径
    context.arc(100,100,99,0,3,false);//（x，y，半径，开始角度，结束角度，是否逆时针）弧线
    context.arcTo(100,100,80,80,50);//（x1，y1，x2，y2，半径）弧线
    context.bezierCurveTo(60,60,50,50,100,100);//（c1x，c1y，c2x，c2y，x，y）三次贝塞尔曲线
    context.moveTo(0,0);//移动光标，落笔，绘制直线前必须有这步
    context.lineTo(50,100);//（x，y）直线
    context.quadraticCurveTo(100,100,200,200)//(cx，cy，x，y)二次贝塞尔曲线
    context.rect(100,200,40,50)//绘制矩形路径
    context.closePath()//返回起点的线
    context.fillStyle = "#ff9900";
    context.fill();//填充已闭合的路径，不用指定坐标
    context.strokeStyle = "#0000ff"
    context.stroke()//描边已闭合的路径，不用指定坐标

    // context.clip()//基于已有路径创建新剪切区域，裁剪后下面的画图如果不在这个裁剪区域内就不显示了

    //两个相交矩形
    context.fillStyle = "#ff0000"
    context.fillRect(10,10,50,50)
    context.fillStyle = "rgba(0,0,255,0.5)"
    context.fillRect(50,50,50,50)
    context.clearRect(50,50,10,10)

    context.font = "bold 24px Arial";//字体样式 大小 字体
    context.textAlign = "center";//水平对齐 start center end
    context.textBaseline = "middle";//基线 top middle bottom
    context.fillText("12",150,20);//实心字
    
    context.save();//保存之前的设置和变换，不保存内容
    context.rotate(Math.PI/6);//围绕原点旋转弧度，用数字不准确，用Math.PI/6[30度]
    context.scale(1.5,1.5);//缩放并移位，默认1.0
    context.translate(50,50);//移动原点
    context.strokeText("12",150,40);//描边字
    context.restore();//恢复保存的图形
    context.strokeText("13",150,40);//因为恢复了，所以13不会有角度和缩放变化

    
    context.drawImage(box,80,80);//将获取的元素绘制在x,y坐标
    context.drawImage(box,100,150,90,50);//将获取的元素绘制在x,y坐标，目标宽,高
    context.drawImage(box,70,0,60,70,250,200,60,70);//从坐标70,0开始获取宽度60高度70的图形，放置在坐标250,200，宽60高70

    let imgURL = kkk.toDataURL("image/png")//取得图像数据URL，base64数据
    let image = document.createElement("img")
    image.src = imgURL
    document.body.appendChild(image)

    // context.shadowOffsetX = 5;//x偏移量
    // context.shadowOffsety = 5;//y偏移量
    // context.shadowBlur = 4;//模糊量
    // context.shadowColor = "#999999";//阴影颜色

    //创建线性渐变
    //let gradient = context.createLinearGradient(230,230,330,330);//（起点x,y,终点x,y）此处坐标与下面fillRect填充坐标相关，330=230+100
    // 写成函数
    // function crlg(context,x,y,width,height){
    //     return context.createLinearGradient(x,y,x+width,y+height)
    // }
    // let gradient = crlg(context,230,230,100,100)
    
    //创建径向渐变
    //let gradient = context.createRadialGradient(280,280,10,280,280,20)//（起点x,y,起点半径,终点x,y,终点半径）
    //写成函数
    function crlg(context,x,y,width,height,r1,r2){
        return context.createRadialGradient(x+width/2,y+height/2,r1,x+width/2,y+height/2,r2)
    }
    let gradient = crlg(context,230,230,100,100,10,30)
    
    gradient.addColorStop(0,"#ff0000");//第一种颜色，范围0——1
    gradient.addColorStop(1,"#ffcc00");//最后一种颜色
    context.fillStyle = gradient;//填充颜色为创建的渐变对象
    context.fillRect(230,230,100,100);//填充绘制，坐标与创建的线性渐变坐标相关

    var pat = context.createPattern(kkk,"repeat");//重复图案，图片必须是本地的，不能跨域？
    context.rect(10,10,150,100);
    context.fillStyle = pat;
    context.fill();

　　　 //使用new Image方式没有跨域问题

　　　 var img = new Image;

      img.src = "https://www.baidu.com/img/flexible/logo/pc/result.png";

      img.onload = function(){

          var rep = cvs.createPattern(this,"repeat");

          cvs.fillStyle = rep;

          cvs.fillRect(0,0,draw.width,draw.height);

      }

//修改全局透明度，针对下面的绘图0-1
    // context.globalAlpha = 0.5
    //改变图层关系，针对下面的绘图"source-over"默认顶层 "source-in"显示重叠线条 "source-out"不显示重叠线条 "source-atop"显示重叠色块 
    //"destination-over"底层 "destination-in"显示重叠线条保留原色 "destination-out"完全扣去重叠区域 "destination-atop"显示线条 
    //"lighter"重叠部分色值相加 "copy"显示线条 "xor"重叠部分色值异或 
    context.globalCompositeOperation = "destination-over"

    context.fillStyle = "#ff0000"
    context.fillRect(0,0,150,150)

    //置灰
    let imageData = context.getImageData(10,5,100,100);//获取图像数据，(开始坐标x,y，宽度，高度)
    let data = imageData.data;//数组中4个值表示1个像素的rgba
    for(var i=0;i<data.length;i+=4){
        var red = data[i]
        var green = data[i+1]
        var blue = data[i+2]
        var alpha = data[i+3]
        var average = Math.floor((red+green+blue)/3)
        //赋平均值可置灰
        data[i] = average
        data[i+1] = average
        data[i+2] = average
        //加同样的值可增亮，减变暗
        // data[i] += 100
        // data[i+1] += 100
        // data[i+2] += 100
    }
    imageData.data = data;
    context.putImageData(imageData,0,0);//把图像数据绘制到画布
    
    
    context.stroke();

}

 

 

 

钟表

body{
    display:flex;
    justify-content: center;
    align-items: center;
    height:100vh;
    background: #fafafa;
}

<canvas id="kkk" width="400" height="400"></canvas>

var kkk = document.getElementById("kkk");
var context = kkk.getContext("2d");
var width = kkk.width;
var height = kkk.height;
var ww = width/4
var hh = height/4
//绘制钟表
function clockFn(){
    context.clearRect(0,0,width,height);
    context.save();
    context.translate(ww,hh);//移动原点到(ww,hh)
    context.beginPath();
    context.arc(0,0,99,0,2*Math.PI,false);//完整圆0到2π
    context.moveTo(94,0);//不移动会有多余的线
    context.arc(0,0,94,0,2*Math.PI,false);
    // console.log(context.isPointInPath(100,100))//指定坐标是否在绘制路径上，true,false
    context.font = "bold 14px Arial";//字体样式 大小 字体
    context.textAlign = "center";//水平对齐 start center end
    context.textBaseline = "middle";//基线 top middle bottom
    
    context.fillText("12",0,-80);//绘制文本（字符串，x，y）相对于上面的方法x-100,y-100
    context.fillText("1" ,40,-70);
    context.fillText("2" ,70,-40);
    context.fillText("3" ,80,0);
    context.fillText("4" ,70,40);
    context.fillText("5" ,40,70);
    context.fillText("6" ,0,80);
    context.fillText("7" ,-40,70);
    context.fillText("8" ,-70,40);
    context.fillText("9" ,-80,0);
    context.fillText("10",-70,-40);
    context.fillText("11",-40,-70);
    context.stroke();
}

function pointerFn(){
    var now = new Date();
    var h = now.getHours();
    var m = now.getMinutes();
    var s = now.getSeconds();
    hourFn(h,m);
    minuteFn(m,s);
    secondFn(s);
}
function hourFn(h,m){
    h = h+m/60
    context.save();
    context.beginPath();
    context.rotate(2*Math.PI/12*h);
    context.lineWidth = '4';
    context.moveTo(0,0);
    context.lineTo(0,-45);
    context.stroke();
    context.closePath();
    context.restore();
}
function minuteFn(m,s){
    m = m+s/60
    context.save();
    context.beginPath();
    context.rotate(2*Math.PI/60*m);
    context.lineWidth = '2';
    context.moveTo(0,0);
    context.lineTo(0,-65);
    context.stroke();
    context.closePath();
    context.restore();
}
function secondFn(s){
    context.save();
    context.beginPath();
    context.rotate(2*Math.PI/60*s);
    context.lineWidth = '1';
    context.moveTo(0,0);
    context.lineTo(0,-85);
    context.stroke();
    context.closePath();
    context.restore();
}
setInterval(function(){
    clockFn()
    pointerFn()
    context.restore();
},30/1000)