初始接口<body><canvas id=“canvas”></canvas><script>var canvas = document.getElementById(“canvas”);var context = canvas.g ...
初始接口
<body><canvas id=“canvas”></canvas><script>var canvas = document.getElementById(“canvas”);var context = canvas.getContext(“2d”);//使用content进行绘制</script></body>
直线绘制
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><canvas id="canvas" ></canvas><script> window.onload = function () { var canvas = document.getElementById("canvas"); canvas.width = 1024; canvas.height = 768; //绘制的接口 var context = canvas.getContext("2d"); //Draw a line //意图绘制，状态绘制 //路径定义的首尾 context.beginPath(); context.moveTo(100, 100);//笔尖 context.lineTo(700, 700);//笔尾 context.lineTo(100, 700); context.lineTo(100, 100); context.closePath();// context.fillStyle = "rgb(2,100,30)";// //填充颜色// context.fill(); //线条的宽度 context.lineWidth = 5; //线条的样式 context.strokeStyle = "#058"; //具体绘制 //笔画 context.stroke(); context.beginPath(); context.moveTo(200, 100); context.lineTo(700, 600); context.closePath(); context.strokeStyle = "black"; context.stroke(); //canvas是基于状态绘制的 }</script></body></html>方法
context.beginPath();
context.moveTo();
context.lineTo();
context.closePath();
context.fill();
context.stroke();
属性
context.fillStyle;
context.strokeStyle
context.lineWidth
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：canvas绘制基础
关键词：
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
