canvas最小模板
Posted Rand Tsui
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas最小模板相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas base</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
}
#c{
position: relative;
display: block;
}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
let canvas = document.querySelector('#c');
let W = window.innerWidth;
let H = window.innerHeight;
canvas.width = W;
canvas.height = H;
let ctx = canvas.getContext('2d');
console.log(ctx.fillStyle); //#000000
console.log(ctx.strokeStyle); //#000000
console.log(ctx.shadowColor); //rgba(0,0,0,0)
console.log(ctx.shadowBlur); //0
console.log(ctx.shadowOffsetX); //0
console.log(ctx.shadowOffsetY); //0
console.log(ctx.lineCap); //butt
console.log(ctx.lineJoin); //miter
console.log(ctx.lineWidth); //1
console.log(ctx.miterLimit); //10
function draw(){
ctx.clearRect(0, 0, W, H);
ctx.fillStyle= "#eeffff";
ctx.fillRect(0, 0, W, H);
}
draw();
</script>
</body>
</html>以上是关于canvas最小模板的主要内容，如果未能解决你的问题，请参考以下文章