• canvas实例(基础)


    JS实现五子棋大战:GitHub源码

    知识点总结:

    第一步、基础:

    1 //获取canvas
    2 var chess = document.getElementById('chess');
    3 
    4 //获取上下文,创建上下文对象
    5 var context = chess.getContext('2d');

    canvas绘制直线、设置画笔颜色

    1 //设置画笔颜色
    2 context.strokeStyle = '#bfbfbf';
    3 
    4 context.moveTo(0, 0);
    5 context.lineTo(450, 450);
    6 //画线
    7 context.stroke();//描边

    canvas画圆、填充渐变色

     1 //画圆
     2 context.beginPath();
     3 context.arc(200, 200, 100, 0, 2*Math.PI);
     4 context.closePath(); 
     5 context.fill(); //填充
     6 
     7 //实现渐变
     8 //gradient是一个渐变对象
     9 var gradient = context.createRadialGradient(200, 200, 50, 200, 200, 20);
    10 
    11 gradient.addColorStop(0, '#0A0A0A');
    12 gradient.addColorStop(1, '#636766');
    13 
    14 context.fillStyle = gradient;
  • 相关阅读:
    如何为创建大量实例节省内存?
    4-5
    4-6
    4-4
    4-3
    4-2
    3-11
    4-1
    3-10
    3-8
  • 原文地址:https://www.cnblogs.com/lqcdsns/p/5324373.html
Copyright © 2020-2023  润新知