HTML5-canvas

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10         <canvas id="myCanvas" width="300" height="300" style="border:1px solid black"></canvas>
11         <img id="scream" src="https://www.runoob.com/try/demo_source/img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
12         <script>
13             var c=document.getElementById("myCanvas");
14             var ctx=c.getContext("2d");
15             // 区块着色：
16             // var c=document.getElementById("myCanvas");
17             // var ctx=c.getContext("2d");
18             // ctx.fillStyle="#ff0000";
19             // ctx.fillRect(0,0,150,75);
20 
21             // 画线算法：
22             // var c=document.getElementById("myCanvas");
23             // var ctx=c.getContext("2d");
24             // ctx.moveTo(0,0);
25             // ctx.lineTo(100,200);
26             // ctx.stroke();
27 
28             // 画圆算法：
29             // var c=document.getElementById("myCanvas");
30             // var ctx=c.getContext("2d");
31             // ctx.beginPath();
32             // ctx.arc(95,50,40,0,2*Math.PI);
33             // ctx.stroke();
34 
35             // 实体文本绘制:
36             // var c=document.getElementById("myCanvas");
37             // var ctx=c.getContext("2d");
38             // ctx.font="20px Arial";
39             // ctx.fillText("HELLO WORD",10,50);
40 
41             // 虚线文本绘制：
42             // var c=document.getElementById("myCanvas");
43             // var ctx=c.getContext("2d");
44             // ctx.font="20px Arial";
45             // ctx.strokeText("HELLO WORD",40,60);
46 
47             // 渐变：
48                 // 线性渐变：
49                     // // 创建渐变：
50                     //     var c=document.getElementById("myCanvas");
51                     //     var ctx=c.getContext("2d");
52                     //     var grd=ctx.createLinearGradient(0,0,200,0);
53                     //     grd.addColorStop(0,"skyblue");
54                     //     grd.addColorStop(1,"pink");
55                     // // 填充渐变：
56                     //     ctx.fillStyle=grd;
57                     //     ctx.fillRect(10,10,150,80);
58 
59                 // 径向渐变：
60                     // // 创建渐变：
61                     //     var c=document.getElementById("myCanvas");
62                     //     var ctx=c.getContext("2d");
63                     //     var grd=ctx.createRadialGradient(75,50,5,90,60,100);
64                     //     grd.addColorStop(0,"skyblue");
65                     //     grd.addColorStop(1,"pink");  
66                     // // 填充渐变:
67                     //     ctx.fillStyle=grd;
68                     //     ctx.fillRect(10,10,150,80);
69 
70             // 图像画布：(drawImage(img,x,y))
71             //     var c=document.getElementById("myCanvas");
72             //     var ctx=c.getContext("2d");
73             //     var img=document.getElementById("scream");
74             //     img.onload=function() {
75             //          ctx.drawImage(img,10,10);
76             //      }
77 
78         </script>
79 </body>
80 </html>

相关阅读:
我理解的 js 异步成长总结
 小程序获取地理位置-- wx.getLocation
H5页面在微信端的分享
 ES6 我的总结学习
 5 分钟掌握 JS 实用窍门技巧，帮你快速撸码--- 删除数组尾部元素、E6对象解构、async/await、操作平铺嵌套多维数组等
 小程序 video 层级，原生组件
 React 事件传参
 微信小程序中如何使用setData --- 修改数组对象、修改对象
 流氓式--小程序用户授权 --- 小程序授权、获取用户信息
 深度学习的反向传播笔记
原文地址：https://www.cnblogs.com/zwowoy/p/12772889.html