canvas笔记-canvas基本用法
生活随笔
收集整理的這篇文章主要介紹了
canvas笔记-canvas基本用法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這里有幾個要注意的地方：
通過下面這兩種方式設置畫布的高度和寬度
及
?
通過下面這兩種方式對不支持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("2d");if(canvas.getContext("2d")){let context = canvas.getContext("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>?
?
總結
以上是生活随笔為你收集整理的canvas笔记-canvas基本用法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MySQL笔记-解决InnoDB: Co
- 下一篇： Java笔记-通过反射获取枚举类型中所有