html——canvas

叁歲伎倆 2022-01-06 04:27 207阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>cnavas</title>
    </head>
    <body>
    	<canvas id="myCnavas" width="200" height="100" style="border:1px solid #000;"></canvas><br />
    
    	<script type="text/javascript">
    		var c = document.getElementById("myCnavas");
    		var ctx = c.getContext("2d");//创建context对象
    		ctx.fillStyle = "#ff0000";//红
    		ctx.fillRect(0,0,150,75);//定义矩形当前的填充方式
    
    		ctx.moveTo(0,0);
    		ctx.lineTo(200,100);
    		ctx.stroke();//画对角线
    	</script>
    	<canvas id="myCnavas2" width="200" height="100px" style="border:1px solid #000;"></canvas><br />
    	<script type="text/javascript">
    		var c = document.getElementById("myCnavas2");
    		var ctx = c.getContext("2d");
    		ctx.beginPath();
    		ctx.arc(100,50,40,0,2*Math.PI);//画圆
    		ctx.stroke();
    	</script>
    	<canvas id="myCnavas3" width="200" height="100px" style="border:1px solid #000;"></canvas><br />
    	<script type="text/javascript">
    		var c = document.getElementById("myCnavas3");
    		var ctx = c.getContext("2d");
    		ctx.font = "30px Arial";
    		ctx.fillText("Hello World",20,60);//绘制实心文本
    		ctx.strokeText("Hello World",10,50);//绘制空心文本
    	</script>
    	<canvas id="myCnavas4" width="200" height="100px" style="border:1px solid #000;"></canvas>
    	<script type="text/javascript">
    		var c = document.getElementById("myCnavas4");
    		var ctx = c.getContext("2d");
    		//create gradient
    		var grd = ctx.createLinearGradient(0,0,200,0);
    		grd.addColorStop(0,"red");
    		grd.addColorStop(1,"white");
    
    		//fill with gradient
    		ctx.fillStyle = grd;
    		ctx.fillRect(10,10,150,80);
    		
    	</script>
    	<canvas id="myCnavas5" width="200" height="100px" style="border:1px solid #000;"></canvas><br />
    	<script type="text/javascript">
    		var c = document.getElementById("myCnavas5");
    		var ctx = c.getContext("2d");
    		//create gradient
    		var grd = ctx.createRadialGradient(75,50,5,75,50,100);//径向
    		grd.addColorStop(0,"red")
    		grd.addColorStop(1,"white");
    
    		//fill with gradient
    		ctx.fillStyle = grd;
    		ctx.fillRect(10,10,150,80);
    		
    	</script>
    	<img id="scream" src="http://www.w3cschool.cn/attachments/image/20160224/1456314599613373.jpg" alt="The Scream" >
    	<canvas id="myCnavas6" width="300" height="300px" style="border:1px solid #000;"></canvas><br />
    	<script type="text/javascript">
    		var c = document.getElementById("myCnavas6");
    		var ctx = c.getContext("2d");
    		//create gradient
    		var img = document.getElementById("scream");
    		img.onload = function(){ 
    			ctx.drawImage(img,10,10);
    		}
    		
    	</script>
    
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5MzQ1MQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5MzQ1MQ_size_16_color_FFFFFF_t_70]: /images/20211228/e8eb35dfc31143f3acf0196d0f4b82c6.png

html——canvas

发表评论取消回复

还没有评论，来说两句吧...

相关阅读