html5之canvas的使用1

最新推荐文章于 2024-07-19 10:24:06 发布

咖啡机

最新推荐文章于 2024-07-19 10:24:06 发布

阅读量91

点赞数

分类专栏： html 文章标签： html5 canvas

本文链接：https://blog.csdn.net/qq359593234/article/details/84233883

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html5比html以前的版本，添加好几样标签，比如：<canvas/>,<video/>

[quote]<article> Defines an article
<aside> Defines content aside from the page content
<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it
<command> Defines a command button that a user can invoke
<details> Defines additional details that the user can view or hide
<summary> Defines a visible heading for a <details> element
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<figcaption> Defines a caption for a <figure> element
<footer> Defines a footer for a document or section
<header> Defines a header for a document or section
<hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<progress> Represents the progress of a task
<ruby> Defines a ruby annotation (for East Asian typography)
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<rp> Defines what to show in browsers that do not support ruby annotations
<section> Defines a section in a document
<time> Defines a date/time
<wbr> Defines a possible line-break

[/quote]
等等。



<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="225">Your browser does not support the canvas tag.</canvas>


<canvas id="myCanvas1" width="500" height="375">Your browser does not support the canvas tag.</canvas>


<canvas id="myCanvas2" width="500" height="600">Your browser does not support the canvas tag.</canvas>


<canvas id="myCanvas3" width="1600" height="900">Your browser does not support the canvas tag.</canvas>

<img id="pic" src="./a.png" alt="beauty" width="400" height="300"/>


<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#AA0000';
ctx.fillRect(100,100,100,100);//前两个是左上角相对浏览器的左上角的位置，后再从个参数是矩形的长宽。


function drawLine(){
			var canvas=document.getElementById('myCanvas1');
			var context=canvas.getContext('2d');
			context.fillStyle='#0AAA00';
			context.fillRect(50,25,180,80);//前两个是左上角相对浏览器的左上角的位置，后再从个参数是矩形的长宽。

			context.moveTo(50,100);
			context.lineTo(10,375);
			context.strokeStyle="#000";
			context.stroke();

			//下面4行语句，完成一线段的绘画
			context.moveTo(0,0); //起点？
			context.lineTo(500,23);//终点？
			context.strokeStyle="#000";//颜色方案
			context.stroke();//正式绘制

			context.font = "bold 50px sans-serif"; //从英文font看，是字体方案
			context.fillText("html5",250,43); //三个参数，第一个串表示要绘画的文字；第二，第三个表示水平，坚直座标。

			context.textAlign="right";
			context.textBaseLine="bottom";
			context.fillText("html5",250,190);

}

function drawGradients(){

		//渐变

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

//		var my_gradient = context.createLinearGradient(0,0,100,10);
		my_gradient.addColorStop(0,"black");
		my_gradient.addColorStop(1,"white");
//		my_gradient.addColorStop(0,"red");
//		my_gradient.addColorStop(1,"blue");
//		context.fillStyle = my_gradient;
//		context.fillRect(0,0,300,255);
//		
	var my_gradient = context.createRadialGradient(0,0,30,50,50,50);
//		my_gradient.addColorStop(0,"black");
//		my_gradient.addColorStop(1,"white");
		my_gradient.addColorStop(0,"red");
		my_gradient.addColorStop(1,"blue");
		context.fillStyle = my_gradient;
		context.fillRect(0,0,300,255);



}

function drawImg(){

		var canvas=document.getElementById('myCanvas3');
		var context=canvas.getContext('2d');
		var pic = document.getElementById("pic");
		context.drawImage(pic,0,0);
}


</script>

<input type="button" onclick="drawLine()" value="drawLine"/>
<input type="button" onclick="drawGradients()" value="drawGradients"/>
<input type="button" onclick="drawImg()" value="drawImg"/>

</body>
</html>

咖啡机

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5之canvas的使用1

html5比html以前的版本，添加好几样标签，比如：,[quote] Defines an article Defines content aside from the page content Isolates a part of text that might be formatted in a different direction from other text ou...
复制链接

扫一扫

专栏目录