CanvasContext

    无

    示例

    跳转编辑工具

    在开发者工具中打开

    扫码体验

    代码示例

    CanvasContext - 图2

    代码示例

    • SWAN
    • JS
    • CSS

    • JS

    3. canvas.arc = function (context) {
    4.     context.beginPath();
    5.     context.arc(100, 75, 50, 0, 2 * Math.PI);
    6.     context.setFillStyle('blue');
    7.     context.fill();
    8.     context.draw();
    9. };
    11. canvas.beginPath = function (context) {
    12.     context.beginPath();
    13.     context.setLineWidth(5);
    14.     context.setStrokeStyle('#ff0000');
    15.     context.moveTo(0, 75);
    16.     context.lineTo(250, 75);
    17.     context.stroke();
    19.     context.beginPath();
    20.     context.setStrokeStyle('#0000ff');
    21.     context.moveTo(50, 0);
    22.     context.lineTo(150, 130);
    23.     context.stroke();
    24. };
    26. canvas.bezierCurveTo = function (context) {
    27.     context.beginPath();
    28.     context.moveTo(20, 20);
    29.     context.bezierCurveTo(20, 100, 200, 100, 200, 20);
    30.     context.setStrokeStyle('black');
    31.     context.stroke();
    32. };
    34. canvas.clearRect = function (context) {
    35.     context.setFillStyle('blue');
    36.     context.fillRect(0, 0, 250, 150);
    37.     context.clearRect(20, 20, 150, 75);
    38.     context.draw();
    39. };
    41. canvas.clip = function (context) {
    42.     context.beginPath();
    43.     context.rect(50, 20, 200, 120);
    44.     context.stroke();
    45.     context.clip();
    46.     context.fillRect(0, 0, 150, 100);
    47. };
    49. canvas.closePath = function (context) {
    50.     context.beginPath();
    51.     context.moveTo(20, 20);
    52.     context.lineTo(20, 100);
    53.     context.lineTo(70, 100);
    54.     context.closePath();
    55.     context.stroke();
    56. };
    58. canvas.createCircularGradient = function (context) {
    59.     // Create circular gradient
    60.     const grd = context.createCircularGradient(75, 50, 50);
    61.     grd.addColorStop(0, 'red');
    62.     grd.addColorStop(1, 'blue');
    64.     // Fill with gradient
    65.     context.setFillStyle(grd);
    66.     context.fillRect(30, 30, 150, 80);
    67. };
    69. canvas.createLinearGradient = function (context) {
    70.     const grd = context.createLinearGradient(0, 0, 200, 0);
    71.     grd.addColorStop(0, 'blue');
    72.     grd.addColorStop(1, 'red');
    74.     // Fill with gradient
    75.     context.setFillStyle(grd);
    76.     context.fillRect(30, 30, 150, 80);
    77. };
    79. canvas.drawImage = function (context) {
    80.     context.drawImage('https://b.bdstatic.com/searchbox/icms/searchbox/img/api_logo.png', 0, 0);
    81. };
    83. canvas.fill = function (context) {
    84.     context.beginPath();
    85.     context.moveTo(100, 100);
    86.     context.lineTo(10, 100);
    87.     context.lineTo(10, 10);
    88.     context.fill();
    89. };
    91. canvas.fillRect = function (context) {
    92.     context.beginPath();
    93.     context.setFillStyle('blue');
    94.     context.fillRect(30, 30, 150, 75);
    95. };
    97. canvas.fillText = function (context) {
    98.     context.setFontSize(20);
    99.     context.fillText('Hello', 20, 20);
    100.     context.fillText('World', 100, 100);
    101. };
    103. canvas.font = function (context) {
    104.     context.font = '50px oblique bold Microsoft YaiHei';
    105.     context.fillText('微软雅黑', 90, 90);
    106.     context.font = '50px 楷体';
    107.     context.fillText('楷体', 90, 200);
    108. };
    110. canvas.lineTo = function (context) {
    111.     context.beginPath();
    112.     context.moveTo(10, 10);
    113.     context.rect(10, 10, 100, 50);
    114.     context.lineTo(110, 60);
    115.     context.stroke();
    116. };
    118. canvas.moveTo = function (context) {
    119.     context.moveTo(10, 10);
    120.     context.lineTo(100, 10);
    121.     context.moveTo(10, 100);
    122.     context.stroke();
    123. };
    125. canvas.quadraticCurveTo = function (context) {
    126.     context.beginPath();
    127.     context.moveTo(20, 20);
    129.     context.stroke();
    130. };
    133. canvas.rect = function (context) {
    134.     context.beginPath();
    135.     context.rect(30, 30, 150, 75);
    136.     context.stroke();
    137. };
    139. canvas.rotate = function (context) {
    140.     context.beginPath();
    141.     context.strokeRect(100, 10, 150, 100);
    142.     context.rotate(10 * Math.PI / 180);
    143.     context.strokeRect(100, 10, 150, 100);
    144.     context.rotate(10 * Math.PI / 180);
    145.     context.strokeRect(100, 10, 150, 100);
    146.     context.fill();
    147. };
    149. canvas.saveAndRestore = function (context) {
    150.     context.beginPath();
    151.     context.setFillStyle('red');
    152.     context.save();
    154.     context.setFillStyle('blue');
    155.     context.fillRect(10, 10, 150, 100);
    156.     context.restore();
    158.     context.fillRect(50, 50, 150, 100);
    159.     context.stroke();
    160. };
    162. canvas.scale = function (context) {
    163.     context.beginPath();
    164.     context.rect(10, 10, 25, 15);
    165.     context.stroke();
    167.     context.scale(2, 2);
    169.     context.beginPath();
    170.     context.rect(10, 10, 25, 15);
    171.     context.stroke();
    173.     context.scale(2, 2);
    175.     context.beginPath();
    176.     context.rect(10, 10, 25, 15);
    177.     context.stroke();
    178. };
    180. canvas.setFillStyle = function (context) {
    181.     ['blue', '#ffff00', 'rgba(255,255,0, 0.3)'].forEach(function (item, index) {
    182.         context.setFillStyle(item);
    183.         context.beginPath();
    184.         context.rect(0 + 75 * index, 0, 50, 50);
    185.         context.fill();
    186.     });
    187. };
    189. canvas.setFontSize = function (context) {
    190.     context.setFontSize(20);
    191.     context.fillText('20', 20, 20);
    192.     context.setFontSize(30);
    193.     context.fillText('30', 40, 40);
    194.     context.setFontSize(40);
    195.     context.fillText('40', 60, 60);
    196.     context.setFontSize(50);
    197.     context.fillText('50', 90, 90);
    198. };
    200. canvas.setGlobalAlpha = function (context) {
    201.     context.setFillStyle('red');
    202.     context.fillRect(10, 10, 150, 100);
    203.     context.setGlobalAlpha(0.2);
    204.     context.setFillStyle('blue');
    205.     context.fillRect(50, 50, 150, 100);
    206.     context.setFillStyle('yellow');
    207.     context.fillRect(100, 100, 150, 100);
    208.     context.draw();
    209. };
    211. canvas.setLineCap = function (context) {
    212.     context.beginPath();
    213.     context.moveTo(20, 10);
    214.     context.lineTo(200, 10);
    215.     context.stroke();
    216.     ['butt', 'round', 'square'].forEach(function (item, index) {
    217.         context.beginPath();
    218.         context.setLineCap(item);
    219.         context.setLineWidth(10);
    220.         context.moveTo(20 + 20 * index, 20 + 20 * index);
    221.         context.lineTo(200, 20 + 20 * index);
    222.         context.stroke();
    223.     });
    224. };
    226. canvas.setLineDash = function (context) {
    227.     context.setLineDash([10, 20], 5);
    228.     context.beginPath();
    229.     context.moveTo(0, 100);
    230.     context.lineTo(400, 100);
    231.     context.stroke();
    232. };
    234. canvas.setLineJoin = function (context) {
    235.     context.beginPath();
    236.     context.moveTo(10, 10);
    237.     context.lineTo(90, 50);
    238.     context.lineTo(10, 90);
    239.     context.stroke();
    240.     ['bevel', 'round', 'miter'].forEach(function (item, index) {
    241.         context.beginPath();
    242.         context.setLineJoin(item);
    243.         context.setLineWidth(10);
    244.         context.moveTo(30 + 80 * index, 10);
    245.         context.lineTo(120 + 80 * index, 50);
    246.         context.lineTo(30 + 80 * index, 90);
    247.         context.stroke();
    248.     });
    249. };
    251. canvas.setLineWidth = function (context) {
    252.         context.beginPath();
    253.         context.setLineWidth(item);
    254.         context.moveTo(20 + 10 * index, 20 + 20 * index);
    256.         context.stroke();
    257.     });
    258. };
    260. canvas.setMiterLimit = function (context) {
    261.     [1, 2, 3, 4].forEach(function (item, index) {
    262.         context.beginPath();
    263.         context.setMiterLimit(item);
    264.         context.setLineWidth(10);
    265.         context.setLineJoin('miter');
    266.         context.moveTo(50 + 40 * index, 10);
    267.         context.lineTo(140 + 40 * index, 50);
    268.         context.lineTo(50 + 40 * index, 90);
    269.         context.stroke();
    270.     });
    271. };
    273. canvas.setShadow = function (context) {
    274.     context.beginPath();
    275.     context.setFillStyle('blue');
    276.     context.setShadow(15, 15, 15, 'red');
    277.     context.rect(30, 30, 150, 75);
    278.     context.fill();
    279. };
    281. canvas.setStrokeStyle = function (context) {
    282.     context.setStrokeStyle('blue');
    283.     context.strokeRect(30, 30, 150, 75);
    284. };
    286. canvas.setTextAlign = function (context) {
    287.     context.setStrokeStyle('red');
    288.     context.moveTo(150, 20);
    289.     context.lineTo(150, 170);
    290.     context.stroke();
    292.     context.setFontSize(15);
    293.     context.setTextAlign('left');
    294.     context.fillText('textAlign=left', 150, 60);
    296.     context.setTextAlign('center');
    297.     context.fillText('textAlign=center', 150, 80);
    299.     context.setTextAlign('right');
    300.     context.fillText('textAlign=right', 150, 100);
    301. };
    303. canvas.setTextBaseline = function (context) {
    304.     context.setStrokeStyle('red');
    305.     context.moveTo(5, 75);
    306.     context.lineTo(295, 75);
    307.     context.stroke();
    309.     context.setFontSize(20);
    311.     context.setTextBaseline('top');
    312.     context.fillText('top', 5, 75);
    314.     context.setTextBaseline('middle');
    315.     context.fillText('middle', 50, 75);
    317.     context.setTextBaseline('bottom');
    318.     context.fillText('bottom', 120, 75);
    320.     context.setTextBaseline('normal');
    321.     context.fillText('normal', 200, 75);
    322. };
    324. canvas.setTransform = function (context) {
    325.     context.setFillStyle('blue');
    326.     context.fillRect(30, 30, 150, 75);
    327.     context.setTransform(1, 0.5, -0.5, 1, 30, 10);
    328.     context.setFillStyle('red');
    329.     context.fillRect(30, 30, 150, 75);
    330.     context.setTransform(1, 0.5, -0.5, 1, 30, 10);
    331. };
    333. canvas.stroke = function (context) {
    334.     context.beginPath();
    335.     context.moveTo(100, 100);
    336.     context.lineTo(10, 100);
    337.     context.lineTo(10, 10);
    338.     context.stroke();
    339. };
    341. canvas.strokeRect = function (context) {
    342.     context.setStrokeStyle('blue');
    343.     context.strokeRect(30, 30, 150, 75);
    344. };
    346. canvas.translate = function (context) {
    347.     context.strokeRect(10, 10, 150, 100);
    348.     context.translate(20, 20);
    349.     context.strokeRect(10, 10, 150, 100);
    350.     context.translate(20, 20);
    351.     context.strokeRect(10, 10, 150, 100);
    352. };
    354. canvas.addColorStop = function (context) {
    355.     const grd = context.createLinearGradient(30, 10, 120, 10);
    356.     grd.addColorStop(0, 'red');
    357.     grd.addColorStop(0.16, 'orange');
    358.     grd.addColorStop(0.33, 'yellow');
    359.     grd.addColorStop(0.5, 'green');
    360.     grd.addColorStop(0.66, 'cyan');
    361.     grd.addColorStop(0.83, 'blue');
    362.     grd.addColorStop(1, 'purple');
    364.     context.setFillStyle(grd);
    365.     context.fillRect(30, 30, 150, 80);
    366. };
    368. canvas.reset = function (context) {
    369.     context.beginPath();
    371.     context.setFillStyle('#000000');
    372.     context.setStrokeStyle('#000000');
    373.     context.setFontSize(10);
    375.     context.setShadow(0, 0, 0, 'rgba(0, 0, 0, 0)');
    377.     context.setLineCap('butt');
    378.     context.setLineJoin('miter');
    379.     context.setLineWidth(1);
    380.     context.setMiterLimit(10);
    381. };