两款HTML动态爱心代码

代码地址:https://download.csdn.***

HTML动态爱心代码一

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas爱心</title>

<style>
html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  background: #000;
}
canvas {
  position: absolute;
  width: 100%;
  height: 100%;
}</style>
</head>
<body>

<canvas id="pinkboard"></canvas>

<script>
...

HTML动态爱心代码二

index.html

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>aixin</title>
  </head>
  <style>
    #drawing {
      height: 100%;
      width: 100%;
    }
</style>

  <body>
    <canvas id="drawing"></canvas>
  </body>
  <script>
    
    var drawing = document.getElementById("drawing"); //获取canvas元素
    var cheight = document.body.scrollHeight;
    var cwidth = document.body.scrollWidth;
    drawing.width = cwidth; //设置画布大小
    drawing.height = cheight;
    if (drawing.getContext){  //获取绘图上下文
......

使用方法:将源码保存为对应的index.html用浏览器打开index.html即可。

转载请说明出处内容投诉
CSS教程_站长资源网 » 两款HTML动态爱心代码

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买