html5用代码做图案（html5画图代码）[20240426更新]

本篇文章给大家谈谈html5用代码做图案，以及html5画图代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、js+html5实现canvas绘制椭圆形图案的方法
• 2、如何用html5写特殊符号五角星
• 3、HTML5中如何绘制图表？
• 4、如何运用HTML5画图
• 5、100分求html5大神帮我使用代码绘制一个图标。
• 6、用html5画一只乌龟，用属性来做

js+html5实现canvas绘制椭圆形图案的方法

本文实例讲述了js+html5实现canvas绘制椭圆形图案的方法，HTML5

canvas

没有画椭圆的方法，以下代码可以画出椭圆，分享给大家供大家参考，具体实现方法如下：

1、在一个隐式的画布

(将

其

CSS

定义成：display:none;

)

上画园。

2、将隐式画布的影像，以不同的宽高比值，画在另一个显式的画布，以使园变成椭圆。

3、进而，加进动画功能。

html

head

meta

http-equiv="Content-Type"

content="text/html;

charset=utf-8"

/

title测试颜色背景/title

script

var

ticker=0;

var

col

=

new

Array("#000000","#A52A2A","#B8860B","pink","green","yellow","red","orange","#BB008B","#8B0000");

function

drawBackground(){

var

canvasHide=document.getElementById("hide");

//隐藏的画布

var

g=canvasHide.getContext("2d");

//找出隐藏画布

hide

的画笔

g

g.clearRect(0,0,1200,800);

//清理隐藏画布

var

i=0;

do

{

//画

不同颜色

依次同心发散的园

g.beginPath();

var

grd=g.createRadialGradient(300,300,300-i*25,

300,300,265-i*25);

grd.addColorStop(0,col[(0+i+ticker)%col.length]);

grd.addColorStop(1,col[(1+i+ticker)%col.length]);

g.fillStyle=grd;

g.arc(300,300,300-i*25,0,2*Math.PI);

g.fill();

i++;

}

while(i11);

//找出显式画布

myCanvas

的画笔

gg

var

gg=document.getElementById("myCanvas").getContext("2d");

gg.clearRect(0,0,myCanvas.width,myCanvas.height);

//清理显式画布

/*

将隐式画布

hide

的园形图像，

*

以

宽

600,

高

300

的比例,

*

画到显式画布

myCanvas,

*

结果，隐式画布

hide

的园形图像，在显式画布

myCanvas

上

成了椭圆

*/

gg.drawImage(canvasHide,0,0,600,300);

ticker++;

}

function

preperation(){

setInterval('drawBackground()',1000);

}

/script

style

#myCanvas{

position:absolute;

left:0px;

top:0px;

}

#hide{

display:none;

}

/style

/head

body

onLoad="preperation()"

canvas

id="myCanvas"

width="600"

height="400"

/canvas

canvas

id="hide"

width="600"

height="600"

/canvas

/body

/html

希望本文所述对大家的web程序设计有所帮助。

如何用html5写特殊符号五角星

首先贴出HTML5页面的代码：

!DOCTYPE html

html

head

meta charset="UTF-8" /

titleCanvas案例/title

/head

script type="text/javascript" src="script.js"/script

body onload="draw('canvas')"

h1Canvas案例/h1

canvas id='canvas' width="400" height="300" /

/body

/html

在这个页面中我们写了一个canvas元素。该元素的ID为canvas。然后链接了script.js这个文件。

//script.js

function draw(id)

{

var canvas = document.getElementById(id);

if(canvas==null){

return false;

}

var context = canvas.getContext('2d');

context.fillStyle="#eeeeff";

context.fillRect(0,0,400,300);

context.fillStyle='rgba(255,0,0,0.25)';

context.translate(200,50);

createFiveStar(context);

context.fill();

}

function createFiveStar(context){

var dx = 0;

var dy = 100;

var s = 50;

context.beginPath();

var x = Math.sin(0);

var y = Math.cos(0);

var dig = Math.PI/5*4;

for(var i=0;i5;i++){

var x = Math.sin(i*dig);

var y = Math.cos(i*dig);

context.lineTo(dx+x*s,dy+y*s);

}

context.closePath();

}

我们提供了两个方法一个是draw方法。当页面加载完成的时候就会执行draw方法中的内容。

而draw方法中呢又会执行createFiveStart函数。

下面我来分析下createFiveStart函数的内容：

function createFiveStar(context){

var dx = 0;//画出来的五角星x偏移位置

var dy = 100;//画出来的五角星y偏移位置

var s = 50;//画出来的五角星的大小

context.beginPath();//开始路径绘制

var x = Math.sin(0);//默认的x坐标

var y = Math.cos(0);//默认的y坐标

var dig = Math.PI/5*4;//弧度值

for(var i=0;i5;i++){

var x = Math.sin(i*dig);

var y = Math.cos(i*dig);

context.lineTo(dx+x*s,dy+y*s);//划线

}

context.closePath();//结束路径

}

好了到了这里我们就完成了HTML5中，五角星的绘制。

HTML5中如何绘制图表？

图表的背景一般是精心设计的它有一定的梯度、网格线、号码标签和月份名称等等，如果直接通过JavaScript进行绘制可能需数十行或上百行的代码。但是如果我们直接通过Canvas直接创建一个背景图。我们只需要在其他的软件如PS上绘制好一个背景图，然后加载到Canvas上就可以了。

!DOCTYPE html

html

head

meta charset="utf-8"

title绘制图表/title

/head

body

div id="result-stub" class="well hidden"

canvas id="canvas" width="345" height="345"

p你的浏览器不支持canvas元素/p

/canvas

/div

script

//   1、要绘制图表首先我们要获取到canvas对象以及具有图表背景的图片对象。

var

canvas = document.getElementById('canvas'),

context = null;

context = canvas.getContext('2d');

var img = new Image();

img.src ='chart-background.png';//这里是一张具有图表背景的图片

//    2、绘制一个具有图表背景的图片后再根据要绘制的曲线图各个点在canvas是中的坐标绘制直线。

img.onload = function() {

//绘制图片

context.drawImage(img, 0, 0);

//绘制直线

context.beginPath();

context.moveTo(70, 105);

context.lineTo(105, 132);

context.lineTo(142, 250);

context.lineTo(176, 175);

context.lineTo(212, 145);

context.lineTo(245, 197);

context.lineTo(280, 90);

context.stroke();

}

/script

script src="jquery.js"/script

/body

/html

3、本示例的最终绘制效果如下：这样一个曲线图表就绘制出来的，其他的图表也可以用类似的方法进行绘制。

这些都是有关于HTML5新特性的一些应用。给你推荐一个教程网站秒秒学，该网站上有关于HTML5新特性的讲解。

如何运用HTML5画图

工具/材料

Sublime Text

01

首先要准备一个画布，如下图所示，在HTML5中我们用canvas来表示画布

02

然后我们在script脚本中获取画布对象，如下图所示，运用JS的getElementById方法即可

03

接下来我们通过画布对象的getContext方法来获取上下文2d对象，如下图所示，我们要操作的内容都在里面

04

然后我们给2d上下文填充背景色，如下图所示，运用上下文的fillStyle属性即可

05

接下来，运用上下文的fillRect方法来画一个矩形，注意里面的四个值就是四个坐标，如下图所示

06

最后我们运行界面程序，你会看到如下图所示的红色矩形样例，你可要和上面的坐标对应一下

07

当然2d上下文中还可以画其他的图形，如下图所示的圆形，大家根据自己的需要应用即可

100分求html5大神帮我使用代码绘制一个图标。

!DOCTYPE html

html

head

meta charset="utf-8"

title/title

/head

body

canvas id="myCanvas" width="300" height="150" style="background: #0000FF;"/canvas

script type="text/javascript"

var myCan = document.getElementById('myCanvas');

var ctx = myCan.getContext('2d');

ctx.beginPath();

ctx.font = '100 150px "Microsoft YaHei"'; //设置字体

ctx.textAlign = 'left'; //设置对齐方式

ctx.fillStyle = 'rgba(0,0,0,1)'; //设置颜色

ctx.fillText('R',90,130);

ctx.closePath();

ctx.beginPath();

ctx.moveTo(104,130);

ctx.lineTo(186,130);

ctx.strokeStyle = 'black';

ctx.lineWidth = '10';

ctx.stroke();

/script

/body

/html

你看看

用html5画一只乌龟，用属性来做

html5画乌龟，可以使用 HTML5 Canvas API来实现。

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建 Canvas 元素

向 HTML5 页面添加 canvas 元素。

规定元素的 id、宽度和高度：

canvas id="myCanvas" width="200" height="100"/canvas

通过 JavaScript 来绘制

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

script type="text/javascript"

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

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

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

/script

JavaScript 使用 id 来寻找 canvas 元素：

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

然后，创建 context 对象：

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

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形：

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

html5用代码做图案的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于html5画图代码、html5用代码做图案的信息别忘了在本站进行查找喔。