<!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>
本文介绍了如何使用HTML5的Canvas API进行基本绘图，包括设置fillStyle、strokeStyle、阴影属性等，并展示了如何创建一个填充为淡蓝色的矩形。同时涵盖了lineCap、lineJoin、lineWidth等关键样式属性。
扫一扫
1125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
