HTML5-canvas的运用办法介绍-

发布时间：08/01 来源：未知浏览：关键词：

<canvas>新元素?<canvas>元素用于图形的绘制，通过足本(平常是JavaScript)来完成.<canvas>标签只是图形容器，您必需运用足原来绘制图形。你可以通过多种办法运用Canva绘制途径,盒、圆、字符以及增加图像。?注意:?默许状况下<canvas>元素没有边框和内容。

你可以通过多种办法运用Canva绘制途径,盒、圆、字符以及增加图像。

　　注意: 默许状况下

　　画方

DOCTYPE html><html><head><meta charset="UTF-8" name="author" content="赵慧娟"><title>title><script src="Scripts/jquery-1.10.2.js?1.1.10">script><script type="text/javascript">$(function(){var canvas=document.getElementById("myCanvas")var ctx=canvas.getContext("2d");
                ctx.fillStyle="deeppink";
                ctx.fillRect(10,10,100,100);
　　　　　　　　  //ctx.moveTo(0,0);　　　　//定义开端坐标
　　　　　　　　　//ctx.lineTo(100,100);　　//定义完毕坐标
　　　　　　　　　//ctx.stroke();　　　　　　//绘制线条

            })《script》

运转效果：

　　画圆

DOCTYPE html><html><head><meta charset="UTF-8" name="author" content="赵慧娟"><title>title><script src="Scripts/jquery-1.10.2.js?1.1.10">script><script type="text/javascript">$(function(){var canvas=document.getElementById("myCanvas")var ctx=canvas.getContext("2d");
                ctx.fillStyle="deeppink";
                ctx.arc(50,50,50,0,2*Math.PI);
                ctx.stroke();
　　　　　　　　　//ctx.fillText("Hello World",10,50);　　//绘制实心字体
　　　　　　　　　//ctx.strokeText("Hello World",10,50);　//绘制空心字体
})script><style type="text/css">canvas{border: 1px solid #000;}style>head><body><canvas id="myCanvas" width="100" height="100">canvas>body>html>

运转效果：

　　渐变

　　createLinearGradient(x,y,x1,y1) - 新建线条渐变

　　createRadialGradient(x,y,r,x1,y1,r1) - 新建一个径向/圆渐变

// 新建渐变var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"blue"); 
// 添补渐变ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

运转效果：

　　径向/圆渐变

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
// 新建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
 
// 添补渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

运转效果：

图像


    打赏
    



    
    打赏
    
    
    	
        
    	
    		感谢您的支持，我会继续努力的!
    	
    	
    		
    	
    		扫码打赏，你说多少就多少
    	
    		
	    		
	    		
    		
    		
	    		
	    		
    		
    	
    	
    		打开支付宝扫一扫，即可进行扫码打赏哦
    		百分百源码网 建议打赏1～10元，土豪随意，感谢您的阅读！

HTML5-canvas的运用办法介绍-

相关文章

本文标签

广告赞助

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板