canvas笔记1

canvas 默认大小为 300*150

通过 width="400" height="400" 可以改变大小

但是通过STYLE来改变话，会有问题 {width:600px; height:300px} 的话，画布还是由300*150拉伸到600*300，所以里面画一个100*100，但因为拉伸变成200*200

fill 填充

stroke描线

fillRect(L,T,W,H) 默认是黑色 L，T 起点座标，后面是宽高

strokeRect(L,T,W,H) 带边框的方块黑色，1PX大小的边框，但由于电脑原因，（50，50，100，100）5050左取半个像素，右取半个像素，所以左右会有一个像素，所以会变成两像素的边框 Rect(50.5,50.5,200,200)才会变成一像素

lineWidth =10 边框大小

角连接点 lineJoin: miter（直角） round（圆角） bevel(倾角)

        var oC=document.getElementById('c1');
        var oGC = oC.getContext('2d');  //目前只支持2D
        //oGC.fillStyle="red";
        oGC.fillStyle="blue";
        oGC.strokeStyle="red";
        oGC.lineWidth=10;
        oGC.lineJoin='round'
        oGC.fillRect(50,50,200,200);
        oGC.strokeRect(50,50,200,200);

绘制路径

		oGC.beginPath();
		oGC.moveTo(100,100);
		oGC.lineTo(200,200);
		oGC.lineTo(300,200);
		oGC.closePath();  //起点到终点的闭合
		oGC.stroke();

        oGC.beginPath();
        oGC.moveTo(200,200);
        oGC.lineTo(300,300);
        oGC.lineTo(400,300);
        oGC.closePath();
        oGC.fillStyle='red'; //要写在FILL前面，才是红色
        oGC.fill();

注意点，如果没有BEGINPATH，后面的FILL对前面的图形都产生效果。

绘制矩形 ( not fillRect) strokeRect , fillRect, clearRect, fillStyle, strokeStyle

		oGC.beginPath();
		oGC.rect(50,50,100,100)
		oGC.closePath();
		oGC.fill();// stroke()

清除画布的一片矩形区域
oGC.clearRect(0,0,oC.width,oC.height)


save()保存路径  restore()恢复路径

// 如果没有save restore fillStyle奖影响到下面的三角形，造成两个都变红。

        oGC.save()
        oGC.fillStyle='red'; 
        oGC.beginPath();
        oGC.moveTo(100,100);
        oGC.lineTo(200,200);
        oGC.lineTo(300,200);
        oGC.closePath();
        oGC.fill();
        oGC.restore();

        oGC.beginPath();
        oGC.moveTo(200,200);
        oGC.lineTo(300,300);
        oGC.lineTo(400,300);
        oGC.closePath();
        oGC.fill();

相当于，SAVE，是保存当前环境，然后接下来，你可以干啥都行，如FILLSTYLE=“RED” 但只要 RESTORE，后，我还是还原回保存前的状态

            window.οnlοad=function(){

            	var oC = document.getElementById('canvas');
            	var oGC = oC.getContext('2d');

            	oGC.fillStyle='red';

            	oGC.fillRect(100,100,200,200);

            	oGC.save();

            	oGC.fillStyle='green';

            	oGC.fillRect(300,300,200,200);

            	oGC.restore();

            	oGC.fillRect(0,0,50,50);
            }

这三个矩形是 红 绿 ，红，  因为SAVE的关系，而不是红 绿 绿。

线的端点 round square butt（默认，相当于没啥变化） square 高度多出为线宽一半的值

oGC.lineCap = 'square'; //' round square butt'

画线功能

            window.οnlοad=function(){
            	var oC = document.getElementById('canvas');
            	var oGC = oC.getContext('2d');
                oC.οnmοusedοwn=function(ev){
                    oGC.moveTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
                    oC.οnmοusemοve=function(ev){
                        oGC.lineTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
                        oGC.stroke();
                    }

                    oC.οnmοuseup=function(ev){
                         oC.onmousemove = null;
                         oC.onmouseup = null;
                    }
                }
            }

  画圆

          	oGC.moveTo(200,200);

            	//arc(起始位置X,起始位置Y,半径,起始弧度,结束弧度,旋转方向(顺时针FALSE,逆时针TRUE)?)

            	oGC.arc(200,200,100,0,0.5*Math.PI,false);

            	oGC.stroke();
                <pre name="code" class="html">              //闭合 变成扇形  oGC.closePath();

画一个圆弧<pre>context.arcTo(<em>x1</em>,<em>y1</em>,<em>x2</em>,<em>y2</em>,<em>r</em>);

两个点，，再通过半径R 确定一条弧，

相当于，先确认两个点，再画一个为R的圆，圆心到两个点的为R

var oC=document.getElementById('c1');var oGC = oC.getContext('2d'); oGC.beginPath();oGC.moveTo(100,100)oGC.arcTo(300,100,300,200,100);oGC.stroke();

COPY一张图

drawImage(image,x,y) 三个参数时， X表示绘画X轴起点， Y 轴起点

drawImage(image,x,y，w,h) 五个时，w为绘画的宽度，H为高度drawImage(image,x,y，w,h，tx,ty,tw,th) 九个时，为源的X，Y起点，宽度，高度，绘画的起点，宽度，高度

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>html5实战</title>
        <style>
            *{padding: 0; margin: 0;}
            body{background: #000;}
            canvas{background: #fff;}
        </style>
        <script>
            window.οnlοad=function(){
            	var oC = document.getElementById('canvas');
            	var oGC = oC.getContext('2d');
            	var oImg = document.querySelector('#pic');
            	oGC.drawImage(oImg,10,10,100,100)
               //oGC.drawImage(oImg,100,100,100,100,0,0,50,50)
 }

        </script>
    </head>
    <body>
    	<canvas id="canvas" width='400' height="400"></canvas>
    	<img id="pic" src="ball.png">
    </body>
</html>

阴影

与CSS3差不多，少了个扩展半径

            	oGC.save();

            	oGC.shadowColor="rgba(0,0,0,.5)";

            	oGC.shadowOffsetX=10;

            	oGC.shadowOffsetY=2;

            	oGC.shadowBlur = 5;

            	oGC.fillStyle='green';

            	oGC.fillRect(110,110,200,100);

            	oGC.restore();
            	oGC.fillStyle='red';
            	oGC.fillRect(0,0,110,80);

渐变

var gradient  = oGC.createLinearGradient(0,40,0,70);

            	gradient.addColorStop(0,'red');

            	gradient.addColorStop(1,'green');
            	
            	oGC.fillStyle=gradient;

            	oGC.fillRect(0,0,199,100);

<pre name="code" class="html"><img src="https://img-blog.csdn.net/20150605082006184?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbWFnaWNmbHk5NTI3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="100" height="50" alt="" />

createLinearGradient 会返回一个canvasGradient的实例，其下有addColorStop的方法，  至于，渐变走向问题，参考，<pre name="code" class="html"> oGC.createLinearGradient(0,40,0,70);  参数表示起点XY，和终点XY

注意，如果渐变的座标，和FILLRECT的座标，没有发生重合部分，就看不到渐变效果的

createRadialGradient 渐变，oGC.createRadialGradient(x1,y1,r1,x2,y2,r2);

                var gradient  = oGC.createRadialGradient(200,200,100,200,200,200);

                gradient.addColorStop(0,'red');

                gradient.addColorStop(0.5,'blue');

                gradient.addColorStop(0.8,'green');

                oGC.fillStyle=gradient;

                oGC.arc(200,200,200,0,2*Math.PI);

                oGC.fill();

quadraticCurveTo()

context.quadraticCurveTo(cpx,cpy,x,y);

方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。

提示：二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用beginPath() 和moveTo() 方法来定义开始点。

oGC.moveTo(100,200);

oGC.quadraticCurveTo(120,120,200,100);

oGC.stroke();

bezierCurveTo() 方法通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点。

提示：三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用beginPath() 和moveTo() 方法来定义开始点。

	oGC.moveTo(100,200);

            	oGC.bezierCurveTo(120,120,180,180,200,100);

            	oGC.stroke();

</pre><p></p><p>canvas 变形  translate rotate scale</p><p><pre>context.translate(<em>x</em>,<em>y</em>);

translate() 方法重新映射画布上的 (0,0) 位置。 

oGC.translate(100,50);

oGC.fillRect(0,0,200,100);

<pre>oGC.translate(100,50); 相当于把画布的0，0 座标，偏移到100，50上，再画一个矩形

<pre>oGC.rotate(Math.PI/4) 以左上角旋转45度

oGC.scale(0.5,0.5) 以左上角，宽，高缩放

注意点

oGC.rotate  会累加，

oGC.rotate(Math.PI/4)

oGC.rotate(Math.PI/4)
实际旋转为90度，所以解决方法是。。用SAVE（），RESTORE()来保存

用画布画一个变大变小旋转的方块

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>html5实战</title>
        <style>
            *{padding: 0; margin: 0;}
            body{background: #000;}
            canvas{background: #fff;}
        </style>
        <script>
            window.οnlοad=function(){
            	var oC = document.getElementById('canvas');
            	var oGC = oC.getContext('2d');

            	var num = 0;

            	var value=1;

            	var num2=0;

            	oGC.fillStyle="green";

            	setInterval(function(){

            		if(num2==100){

            			value=-1;

            		}else if(num2==0){

            			value=1;
            		}

            		num++;

            		num2+=value;

            		oGC.save();

            		oGC.clearRect(0,0,oC.width,oC.height)

            		oGC.translate(100,100);

	            	oGC.rotate(num*Math.PI/180);

	            	oGC.scale(num2/50,num2/50)

	            	oGC.translate(-50,-50);

	            	oGC.fillRect(0,0,100,100);

	           	oGC.restore();

            	},30)

            }

        </script>
    </head>
    <body>


注意点，正常情况下，旋转是基于0 0 旋转的。。所以如果要矩形环绕左上角旋转，要translate(200,200); rotate();  oGC.fillRect(0,0,100,100);


如果要矩形环绕它中心旋转，刚加句 <pre name="code" class="html">translate(200,200);  rotate()  translate(-50,-50);  oGC.fillRect(0,0,100,100);  

原理和绝对定位居中原理差不多，把它旋转后的位置，再平移物体的宽度高度负一半。然后看起来就像在中心旋转

createPattern 背景填充

var bg = oGC.createPattern(yImg,'repeat');  有repeat x-repeat y-repeat no-repeat

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>html5实战</title>
        <style>
            *{padding: 0; margin: 0;}
            body{background: #000;}
            canvas{background: #fff;}
        </style>
        <script>
            window.οnlοad=function(){
                var yImg = new Image();
                yImg.οnlοad=function(){
                    var oC = document.getElementById('canvas');
                    var oGC = oC.getContext('2d');
                    var bg = oGC.createPattern(yImg,'repeat');
                    oGC.fillStyle=bg;
                    oGC.fillRect(0,0,400,400)
                }
                yImg.src= '1.png';
            }
        </script>
    </head>
    <body>
    <canvas id="canvas" width="400" height="400"> </canvas>
    </body>
</html>

用CANVAS实现微博图片旋转效果，注意点:旋转出去了,要通过DRAWIMAGE的座标点定位回来,也可以ROTATE前,用TRANSLATE定位

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>html5实战</title>
        <style>
            *{padding: 0; margin: 0;}
            body{background: #000;}
            canvas{background: #fff;}
        </style>
        <script>
            window.οnlοad=function(){
                var aInput = document.getElementsByTagName('input');

                var oImg = document.getElementById('img1');

                var yImg = new Image();

                var iNow = 0;

                yImg.οnlοad=function(){

                    draw(oImg);
                }

                yImg.src= oImg.src;
                function draw(obj){
                    var oC = document.createElement('canvas');
                    var oGC = oC.getContext('2d');
                    oC.width = obj.width;
                    oC.height = obj.height;
                    oGC.drawImage(obj,0,0);
                    obj.parentNode.replaceChild(oC,obj);
                    aInput[1].onclick = function(){
                        
                        if(iNow==3){
                            iNow = 0;
                        }
                        else{
                            iNow++;
                        }
                        toChange();
                        
                    };

                    aInput[0].onclick = function(){
                        
                        if(iNow==0){
                            iNow = 3;
                        }
                        else{
                            iNow--;
                        }
                        toChange();
                        
                    };

                    function toChange(){

                        switch(iNow) {
                            case 1:
                                oC.height = obj.width;

                                oC.width = obj.height;
                                
                                oGC.rotate(90*Math.PI/180);

                                oGC.drawImage(obj,0,-obj.height);
                                
                                break;
                            case 2:

                                oC.height = obj.height;

                                oC.width = obj.width;
                                
                                oGC.rotate(180*Math.PI/180);

                                oGC.drawImage(obj,-obj.width,-obj.height);
                                
                                break;

                            case 3:

                                oC.height = obj.width;

                                oC.width = obj.height;
                                
                                oGC.rotate(270*Math.PI/180);

                                oGC.drawImage(obj,-obj.width,0);
                                break;

                            case 0 :
                                oC.height = obj.height;

                                oC.width = obj.width;
                                
                                oGC.rotate(0);

                                oGC.drawImage(obj,0,0);

                                break;

                        }



                    }
                    
                }

            }
        </script>
    </head>
    <body>
        <input type="button" value="prev">
        <input type="button" value="next">


    	<div >
            <img src="1.png" id="img1">  
        </div>


    </body>
</html>

magicfly9527

发布了58 篇原创文章 · 获赞 4 · 访问量 5万+

私信关注

Wireshark 安装+使用（一）

CDN--前端性能優化

xss攻擊原理

github生成個公鑰

html5media.js讓所有瀏覽器支持video標籤

domReady方法

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結