Html5新特性之canvas标签

最新推荐文章于 2024-07-19 23:42:48 发布

zyx198793

最新推荐文章于 2024-07-19 23:42:48 发布

阅读量304

点赞数

分类专栏： Html5 文章标签： html5 stylesheet function image 浏览器 c

本文链接：https://blog.csdn.net/zyx198793/article/details/6712616

版权

Html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script src="js/modernizr.js"></script>

<title>A simple canvas</title>
</head>
<body οnlοad="drawACircle()">
<script type="text/javascript">
  function drawACircle()
  {
	  if(!Modernizr.canvas)alert("你的浏览器不支持canvas");
	  else
	{
	 //定义变量
	 var c=document.getElementById("canvas");
	 var cxt=c.getContext("2d");
	 //画矩形
	 cxt.fillStyle="#ffff00";
	 cxt.fillRect(50,50,100,100)
	 //画圆
	 cxt.arc(700,180,150,0,Math.PI*2,true);
	 cxt.fill();
	 //画渐变的矩形
	 var grd=cxt.createLinearGradient(0,0,600,50);
	     grd.addColorStop(0,"#fffff0");
	     grd.addColorStop(1,"#653200");
	     cxt.fillStyle=grd;
	     cxt.fillRect(100,100,2000,2000)
	//drawImage
	 var img=new Image();
		 img.src="images/sample.jpg";
		 cxt.drawImage(img,100,100);    

		  }
	  }
</script>
<canvas id="canvas" width="800" height="400"> </canvas>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zyx198793

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html5新特性之canvas标签

A simple canvas function drawACircle() { if(!Modernizr.canvas)alert("你的浏览器不支持canvas"); else { //定义变量 var c=document.getEle
复制链接

扫一扫