初学Canvas认识

最新推荐文章于 2023-10-18 15:55:32 发布

theBATes

最新推荐文章于 2023-10-18 15:55:32 发布

阅读量767

点赞数

分类专栏： html web前端文章标签： html w3c canvas

本文链接：https://blog.csdn.net/theBATes/article/details/51891929

版权

html web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Canvas的简单介绍

什么是Canvas：

Canvas是用于在网页上通过javascrpit来绘制的2d图形的。 Canvas是逐像素渲染的。

Canvas的创建：

向html5中添加Canvas元素，应该设置元素的id .宽度，和高度。

<canvans id="myCanvas" width="200" height="100"></canvas>

javaScrpit使用id来寻找canvas元素；

var c = document.getElementById("Canvas Id 值")；

var cxt = c.getContext("2d");建立一个html5的内建对象，通过此对象可以对画布元素进行操作。

cxt.fillStyle="颜色的值"；给画布对象填充颜色；

cxt.fillRect(x,y,width,height) 设置从起始位置开始，设置画布的宽和高，当然起始位值与页面的相对布局有关。

如果要使画布充满全屏，首先获取屏幕的长和宽（必须在 javaScrpit中才能执行）。

var width = window.screeen.width;

var height = window.screen.height;

要为画布元素的长和宽赋予指定的值；

canvas.setAttribute("width",screamWidth);
canvas.setAttribute("height",screamHeight);

如果向画布上添加一个一张图片，这必须为图片先创建一个Image()对象；则

var img = new Image();

获取图片：可以从本地，也可从网络中获取；

img.src="图片的相对路径"

由于获取资源路径有时间差，为了避免还没获取法到就会执行下一行代码，造成程序的错误。

这需要一个资源的回调函数

比如：img.onload = function(){

执行对img对象的绘操作。

ctx.drawImage(img,flk.x,flk.y,flk.width,flk.height);在画布的某个位置上画上一个图片；

}

如果要让一个图片在一个画布上移动，这需要，在一个相对短的时间内改变图片的位置，当然也要把之前的给清除掉；即从新把画布给设置；

setInterval(function{ }，100)；这是一个定时函数，就是每隔100ms,执行function()函数一次；其是放在img.onload = function()函数内；

当然如果让许多相同的图片在画布上运动，就需要在画布上使用更多的图片，同时运动，与第一个图片相同；

以下为相应的代码，可供理解参考；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>雪花飞舞</title>
<style>

body{

display: flex;
justify-content: center;
align-items: center;
}
html,body{
width: 100%;
height: 100%;
}
.tree{
position: relative;
z-index: 10;
/*display: flex;*/
/*justify-content: center;*/
/*align-items: center;*/

/*left:50%;*/
/*top:50%;*/
/*transform: translate(-50%,-50%);*/

}
.text{
position:absolute;
top:50%;
left:50%;
transform:translate(-40px,10px);
}
.oldman{
z-index:10;
position: absolute;
top:-webkit-calc(50% - 200px);
left:-webkit-calc(50% + 60px);
animation: oldman2 0.1s infinite,oldman1 6s;
}
.modile{
position:fixed;
z-index:11;
top:0%;

}
.canvas{
position:fixed;
top:0%;
left:0%;
}
@keyframes oldman1{
from{
top:-100px;
width:30PX;
height: 30PX;
}
to{
width: 112px;
height:151px;

}
}
@keyframes oldman2{

50%{
transform:rotate(-50deg);
}

}

</style>
</head>
<body>
<h1 class="modile">我爱你</h1>
<div class="tree">
<img src="res/tree.png">
<img class="text" src="res/text.png">
</div>
<img class="oldman" src="res/oldman.png">
<canvas class="canvas" id="snowCanvas" width="500" height="500"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("snowCanvas");
var ctx = canvas.getContext("2d");
// 提取屏幕的宽和高；
var screamWidth = window.screen.width;
var screamHeight = window.screen.height;
// 输出屏幕的宽和高
console.log(screamWidth);
console.log(screamHeight);
function setConvas() {
// 设置画布的宽和高
canvas.setAttribute("width",screamWidth);
canvas.setAttribute("height",screamHeight);
}
function clearConvas(){
ctx.fillStyle = '#881155';
// 设置画布的起始位置，和目标
ctx.fillRect(0,0,screamWidth,screamHeight);
}
// 赋值的构造函数
function flake(x,y,width,height)
{
this.x=x;
this.y=y;
this.width=width;
this.height=height;
}
function flakesGreneration(pages){
var flakes = [];
for (var i = 0; i <= pages.count; i++) {
var x = Math.random() * screamWidth;
var y = Math.random()*screamHeight;
var width = Math.random()*pages.baseSize;
var height = width;
var flk = new flake(x,y,width,height);
flakes.push(flk);
}
return flakes;
}
function fly(){
for (var i = 0; i < flakes.length; i++) {
var flk = flakes[i];
flx.x+=1;
flk.y=flk.x*flk.x/2;
if(flk.y>screamHeight)
flk.y=0;
if(flk.x>screamWidth)
flk.x=0;
}
}
// 画布的重复
function draw(){
for (var i = 0; i < flakes.length; i++) {

var flk = flakes[i];
ctx.drawImage(img,flk.x,flk.y,flk.width,flk.height);
}
}
var flakes = flakesGreneration({count:200,baseSize:25});

setConvas();
// 创建一个够造函数的对象，并对其赋值；
// 创建图片对象；
var img = new Image();
// 请求图片路径；
img.src = "res/snow.png";
// 图片请求的回调函数；
img.onload = function(){
setInterval(function(){
clearConvas();
draw();
fly();
},100);
}

</script>

</body>
</html>