这里有几个要注意的地方：
通过下面这两种方式设置画布的高度和宽度
及
通过下面这两种方式对不支持canvas浏览器进行提示：
及
最后一点，在canvas画图和Qt上用QPainter一模一样，都是基于“状态”的画法如下：
通过context.beginPath()及context.closePath()进行设置s
程序运行截图如下：
如下：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
-
- <canvas id="canvas" width="1024" height="768" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
- 当前浏览器不支持canvas
- </canvas>
-
- <script>
- window.onload = function () {
-
- let canvas = document.getElementById("canvas");
-
- //canvas.width = 1024;
- //canvas.height = 769;
-
- //let context = canvas.getContext("https://cdn.jxasp.com:9143/image/2d");
-
- if(canvas.getContext("https://cdn.jxasp.com:9143/image/2d")){
-
- let context = canvas.getContext("https://cdn.jxasp.com:9143/image/2d");
-
- context.beginPath();
- context.moveTo(100, 100);
- context.lineTo(500, 500);
- context.lineTo(100, 500);
- context.lineTo(100, 100);
- context.closePath();
-
- context.lineWidth = 5;
- context.strokeStyle = "red";
- context.stroke();
-
- context.beginPath();
- context.moveTo(200, 100);
- context.lineTo(700, 600);
- context.closePath();
-
- context.strokeStyle = "black";
- context.stroke();
- }
- else{
-
- alert("当前浏览器不支持canvas")
- }
- }
- </script>
- </body>
- </html>
