html5+画图+源码_html5 编程

文章目录：

• 1、html5画布，画出一个矩形中内嵌一个圆形，求源代码（图形颜色无所谓）
• 2、找一点html5写的源代码案例，供初学者学习
• 3、1、HTML5网页结构 2、怎么输出HTML5网页的源代码
• 4、怎么用HTML5技术绘制动态柱形图，有源码最好
• 5、关于html5 canvas 绘图动画的问题,我要实现把一张图片绘制在canvas中,然后使其动起来,代码如下,
• 6、html5 canvas画图

html5画布，画出一个矩形中内嵌一个圆形，求源代码（图形颜色无所谓）

!DOCTYPE html

html

head

title/title

/head

body

canvas id="myCanvas" width="600" height="600" style="border:1px solid #000000;"

您的浏览器不支持 HTML5 canvas 标签。

/canvas

script

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.beginPath();

ctx.fillStyle="#FF6699";

ctx.fillRect(0,0,200,200);

ctx.beginPath();

ctx.arc(100,100,50,0,2*Math.PI);

ctx.stroke();

/script

/body

/html

找一点html5写的源代码案例，供初学者学习

首先准备好11张图片，放到img文件夹下供调用

代码如下：

!DOCTYPE html

html

head

meta charset="UTF-8"

title/title

/head

body

p/p

img src="img/0.JPG" /

img src="img/0.JPG" /

img src="img/colon.JPG" /

img src="img/0.JPG" /

img src="img/0.JPG" /

img src="img/colon.JPG" /

img src="img/0.JPG" /

img src="img/0.JPG" /

script

//var oBody=document.body;

var oP=document.getElementsByTagName("p")[0];

var aImg=document.getElementsByTagName("img");

fn();

setInterval(fn,1000)

function fn(){

var mytime=new Date(); //当前的系统时间  年月日 时分秒 星期 对象

var iHour=mytime.getHours();//小时

var iMin=mytime.getMinutes();//分钟

var iSen=mytime.getSeconds() ;//秒钟

var str="";

//220640

str=toZero(iHour)+":"+toZero(iMin)+":"+toZero(iSen);

oP.innerHTML=str;

for(var i=0;iaImg.length;i++){

if(str.charAt(i)==":"){

aImg[i].src="img/colon.JPG";

}else{

aImg[i].src="img/"+str.charAt(i)+".JPG";

}

}

}

function toZero(n){

if(n10){

return n="0"+n;

}else{

return n=""+n;

}

}

/script

/body

/html

1、HTML5网页结构 2、怎么输出HTML5网页的源代码

html5结构：

!DOCTYPE html

html

head

meta charset="UTF-8"

titleTitle/title

/head

body

/body

/html

输出html5网页源码 你直接f12 或者 鼠标右击 查看网页源代码

怎么用HTML5技术绘制动态柱形图，有源码最好

!doctype html

html lang="en"

head

meta charset="UTF-8"

titleDocument/title

style

body { overflow: hidden; }

.wrapper {

  position: relative;

  margin: 1em auto;

  padding: 0;

  width: 13em; height: 5em;

  box-shadow: inset -1px -1px 0 black;

  list-style: none;

  background: linear-gradient(black 2.5%, transparent 1px),

    linear-gradient(90deg, black 2.5%, transparent 1px);

  background-size: 1em 1em;

  font: 2.5em Verdana, sans-serif;

}

.piece {

  position: absolute;

  right: 0; bottom: 0;

  opacity: .85;

  animation: ani 4s infinite linear alternate;

}

.triangle { overflow: hidden; transform-origin: 0 100%; }

.piece:before {

  position: absolute;

  content: '';

}

.triangle:before {

  width: inherit; height: inherit;

  transform-origin: inherit;

}

.block { width: 5em; height: 1em; }

.block:before { height: 1em; background: inherit; }

.triangle-big {

  right: 5em;

  width: 8em; height: 3em;

  transform: skewX(-69.444deg); /* -arctan(width/height) */

  animation-name: ani-triangle-big;

}

.triangle-big:before {

  background: crimson;

  transform: skewX(69.444deg);  /* arctan(width/height) */

}

.triangle-small {

  bottom: 3em;

  width: 5em; height: 2em;

  transform: skewX(-68.2deg); /* -arctan(width/height) */

  animation-name: ani-triangle-small;

}

.triangle-small:before {

  background: mediumvioletred;

  transform: skewX(68.2deg); /* arctan(width/height) */

}

.block-high {

  bottom: 2em;

  background: darkmagenta;

  animation-name: ani-block-high;

}

.block-high:before {

  top: 100%;

  width: 2em;

}

.block-low {

  background: darkviolet;

}

.block-low:before {

  right: 0; bottom: 100%;

  width: 3em;

}

@keyframes ani-triangle-big {

  0%, 25% {

    right: 5em; bottom: 0;

    transform: rotate(0deg) skewX(-69.444deg);

  }

  75%, 100% {

    right: 0; bottom: 2em;

    transform: rotate(360deg) skewX(-69.444deg);

  }

}

@keyframes ani-triangle-small {

  0%, 25% {

    right: 0; bottom: 3em;

    transform: rotate(0deg) skewX(-68.2deg);

  }

  75%, 100% {

    right: 8em; bottom: 0;

    transform: rotate(-360deg) skewX(-68.2deg);

  }

}

@keyframes ani-block-high {

  0%, 25% { right: 0; bottom: 2em; }

  75%, 100% { right: 3em; bottom: 1em; }

}

/style

/head

body

ul class='5f0e-6e15-baa3-5e78 wrapper'

li class='6e15-baa3-5e78-4227 piece triangle triangle-big'/li

li class='baa3-5e78-4227-006c piece triangle triangle-small'/li

li class='5e78-4227-006c-d6f4 piece block block-low'/li

li class='4227-006c-d6f4-96fd piece block block-high'/li

/ul

/body

/html

关于html5 canvas 绘图动画的问题,我要实现把一张图片绘制在canvas中,然后使其动起来,代码如下,

首先，你这个代码中最后的setInterval("draw()", 100);应该改为setInterval(draw, 100);第一个参数应该是方法名，虽然你那样写也会有效，但强烈建议不要那么写。然后你说你的代码只是在屏幕上闪一下，那么你在画的时候先调一下cxt.beginPath();画结束的时候掉一下cxt.closePaht();试试，这个w3c网站上有讲解，不确定能不能解决你的问题。

补充：测了一下代码，发现问题是出在你的

img.onload=function()

{

cxt.drawImage(img,x,y,80,80);

}

这里，这边不能在img.onload回调方法中调用画图函数，直接画图就好了， cxt.drawImage(img,x,y,80,80);就这样。

html5 canvas画图

情况说明: 图像绘制,使用setInterval闪,没图像;

!doctype html

html

head

meta charset="utf-8"

!-- TemplateBeginEditable name="doctitle" --

title我图片/title

/head

body

canvas id="Map" width="500" height="500" style="background:gray;"/canvas

script

// 设置绘图环境

var myMap = document.getElementById("Map");

var cxt=myMap.getContext('2d');

// 设置图像位置初始位置变量

var x=20;

var y=20;

// 创建绘图象,并且画

var img =new Image();

img.src="image/gun.png";

draw();

function draw()

{

cxt.clearRect(0,0,500,500);

x+=10;

y+=50;

img.onload=function()

{

cxt.drawImage(img,x,y,80,80);

}

}

window.setInterval("draw()",100);

/script

/body

/html