HTML5之canvas基础_htmlcave-优快云博客

本文链接：https://blog.youkuaiyun.com/u013267266/article/details/51764644

本文详细介绍了HTML5的Canvas元素，包括默认尺寸、边框处理、填充与边框样式顺序，以及用JavaScript操作Canvas的方法，如填充方块、描边、路径绘制、保存和恢复状态等。此外，还提供了鼠标画线和方块移动的交互实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5之Canvas

1. Canvas默认的宽度为300px,高度为150px

2. 要在标签上设置宽高不然样式中的宽高是在原来比例上进行等比例缩放的

3. 一般边框多出来一像素的原因：从开始的点向左，向右边分别延伸0.5像素，计算机会自动补为1px,所有看到的为2px

当把开始的点设置为带0.5px的点，画出来的边框就为1px

4. 填充样式和边框样式的绘制顺序会影响显示出来的样式。谁在前，谁先显示出来

<style>

body{ background:black;}

#c1{ background:white;}

span{ color:white;}

</style>

window.onload = function(){

var oC = document.getElementById('c1');

var oGC = oC.getContext('2d'); //webgl : 3D绘图

};

</script>

</head>

<body>

<span>不支持canvas浏览器</span>

</canvas>

</body>

window.onload = function(){

var oC = document.getElementById('c1');

var oGC = oC.getContext('2d');

//oGC.fillRect(50,50,100,100); //填充方块

oGC.strokeRect(50.5,50.5,100,100); //边框方块

};

</script>

</head>

<body>

<span>不支持canvas浏览器</span>

</canvas>

</body>

<style>

body{ background:black;}

#c1{ background:white;}

span{ color:white;}

</style>

window.onload = function(){

var oC = document.getElementById('c1');

var oGC = oC.getContext('2d');

oGC.fillStyle = 'red';//设置填充颜色

oGC.strokeStyle = 'blue';//设置边框颜色

oGC.lineWidth = 10; //设置边框粗细

oGC.fillRect(50,50,100,100);

oGC.strokeRect(50.5,50.5,100,100);

};

</script>

</head>

<body>

<span>不支持canvas浏览器</span>

</canvas>

</body>

<style>

body{ background:black;}

#c1{ background:white;}

span{ color:white;}

</style>

window.onload = function(){

var oC = document.getElementById('c1');

var oGC = oC.getContext('2d');

oGC.fillStyle = 'red';

oGC.strokeStyle = 'blue';

oGC.lineWidth = 10;

oGC.lineJoin = 'bevel';

oGC.fillRect(50,50,100,100);

oGC.strokeRect(50.5,50.5,100,100);

};

</script>

<style>

body{ background:black;}

#c1{ background:white;}

span{ color:white;}

</style>

window.onload = function(){

var oC = document.getElementById('c1');

var oGC = oC.getContext('2d');

oGC.beginPath();

oGC.moveTo(100,100);

oGC.lineTo(200,200);

oGC.lineTo(300,200);

oGC.closePath();

oGC.stroke();//画线连接两点

oGC.beginPath();

oGC.moveTo(100,200);

oGC.lineTo(200,300);

oGC.lineTo(300,300);

oGC.closePath();//闭合起点和终点进行连接

oGC.fill();

};

</script>

</head>

<body>

<span>不支持canvas浏览器</span>

</canvas>

</body>

<style>

body{ background:black;}

#c1{ background:white;}

span{ color:white;}

</style>

window.onload = function(){

var oC = document.getElementById('c1');

var oGC = oC.getContext('2d');

oGC.beginPath();

oGC.rect(100,100,100,100);

oGC.closePath();

oGC.fill();

oGC.clearRect(0,0,oC.width,oC.height);

};

</script>

<style>

body{ background:black;}

#c1{ background:white;}

span{ color:white;}

</style>

window.onload = function(){

var oC = document.getElementById('c1');

var oGC = oC.getContext('2d');

oGC.save();

oGC.fillStyle = 'red';

oGC.beginPath();

oGC.moveTo(100,100);

oGC.lineTo(200,200);

oGC.lineTo(300,200);

oGC.closePath();

oGC.fill();

oGC.restore();

oGC.beginPath();

oGC.moveTo(100,200);

oGC.lineTo(200,300);

oGC.lineTo(300,300);

oGC.closePath();

oGC.fill();

};

</script>

</head>

<body>

<span>不支持canvas浏览器</span>

</canvas>

</body>

<style>

body{ background:black;}

#c1{ background:white;}

span{ color:white;}

</style>

window.onload = function(){

var oC = document.getElementById('c1');

var oGC = oC.getContext('2d');

oGC.lineWidth = 20;

oGC.lineCap = 'square';

oGC.moveTo(100,100);

oGC.lineTo(200,200);

oGC.stroke();

};

</script>

</head>

<body>

<span>不支持canvas浏览器</span>

</canvas>

</body>

实例一：鼠标画线

<style>

body{ background:black;}

#c1{ background:white;}

span{ color:white;}

</style>

window.onload = function(){

var oC = document.getElementById('c1');

var oGC = oC.getContext('2d');

oC.onmousedown = function(ev){

var ev = ev || window.event;

oGC.moveTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);//减去屏幕距离canvas的宽高

document.onmousemove = function(ev){

var ev = ev || window.event;

oGC.lineTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);

oGC.stroke();

};

document.onmouseup = function(){

document.onmousemove = null;

document.onmouseup = null;

};

</script>

</head>

<body>

<span>不支持canvas浏览器</span>

</canvas>

</body>

实例二：方块移动

body{ background:black;}

#c1{ background:white;}

span{ color:white;}

</style>

window.onload = function(){

var oC = document.getElementById('c1');

var oGC = oC.getContext('2d');

var num = 0;

oGC.fillRect(0,0,100,100);

setInterval(function(){

num++;

oGC.clearRect(0,0,oC.width,oC.height);

oGC.fillRect(num,num,100,100);

},30);

};

要在标签上设置宽高不然样式中的宽高是在原来比例上进行等比例缩放的

<style>

body{ background:black;}

#c1{ background:white;width:600px; height:300px;}

span{ color:white;}

</style>

window.onload = function(){

var oC = document.getElementById('c1');

var oGC = oC.getContext('2d');

var num = 0;

oGC.fillRect(0,0,100,100);

}

</script>

</head>

<body>

<canvasid="c1">

<span>不支持canvas浏览器</span>

</canvas>

</body>