canvas 入门 (一) 

插入代码：说明
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #drwaing{
                border: 1px solid black;
            }
        </style>
        <script>
            window.onload=function(){
                var canvas_=document.getElementById('drwaing');
                var content=canvas_.getContext('2d');
                //实心矩形
                content.fillStyle="black";
                content.fillRect(10,10,50,50);
                
                content.fillStyle="rgba(0,0,255,0.5)";
                content.fillRect(40,40,100,100);
                
                //描边矩形
                content.strokeStyle="aqua";
                content.strokeRect(150,150,50,50);
                
                var type_=document.getElementById('selector');
                type_.addEventListener('change',function(){
                    
                    var show_=document.getElementById('show');
                    switch(document.getElementById('selector').selectedOptions[0].value){
                        case 'fill':{
                            show_.style.display="none";
                        }
                        break;
                        case 'border':{
                            show_.style.display="inline";

                        }
                        break;
                        default:
                        break;
                    }
                },false);
                //清楚画布
                var btnClick=document.getElementById("chlickclear");
                btnClick.addEventListener('click',function(){
                    var canvas_s=document.getElementById('drwaing');
                    var contents=canvas_.getContext('2d');
                    contents.clearRect(0,0,200,200);    
                    contents=null;
                    canvas_s=null;
                },false);
                //点击画图
               var drawing=document.getElementById('GetImage');
               drawing.onclick=function(){
                       var input_=document.getElementsByTagName('input');
                       var color_=input_[0].value;
                       var width_=input_[1].value;
                       var height=input_[2].value;
                       var X_=input_[3].value;
                       var Y_=input_[4].value;
                       var canvas_s=document.getElementById('drwaing');
                    var contents=canvas_.getContext('2d');
                    contents.lineWidth=10;
                    switch(document.getElementById('selector').selectedOptions[0].value){
                        case 'fill':{
                            show.
                            contents.fillStyle=color_;
                            contents.fillRect(X_,Y_,width_,height);
                        }
                        break;
                        case 'border':{
                            contents.strokeStyle=color_;
                            content.strokeRect(X_,Y_,width_,height);
                        }
                        break;
                            default:
                        break;
                    }
               }
            }
            /*  绘制矩阵 
             *  记录：画图第一步 先确定图形空间  使用getContent() 方法 传入'2d' /'3d' 得到一块画布 
             *      例如：var content=canvas_.getContext('2d');  -----canvas 是canvas 标签的引用
             *  1.实心矩阵
             *    使用 fillrect(x,y,width,height)   方法        fillStyle属性  确定填充颜色  content.fillStyle='red';
             *  2.描边矩形
             *    使用 strokeRect(x,y,width,height) 方法        strokeStyle属性  确定填充颜色  content.strokeStyle='red';
             *    lineWidth 确定边框宽度   例如 lineWidth=20 后面不带 px 或者其他单位
             *  3.清楚画布
             *    使用 contents.clearRect(0,0,200,200);内部指定清楚区域
             * 
             * 
             * */
        </script>
    </head>
    <body>
        <canvas id="drwaing" width="400" height="400" >Drwing Something</canvas>
        <button id="chlickclear">清除</button>
        <br />
        选择颜色：<input type="color" id="color_" name="color_" />
        类型：
        <select id="selector">
            <option value="fill">实心矩形</option>    
            <option value="border">非实心矩阵</option>
        </select>
        <br />
        长：<input name="width_Rect" id="width_Rect" type="number" min="0" />
        宽：<input name="Height_Rect" id="Height_Rect" type="number" min="0" />
        位置x：<input name="Xplace" id="Xplace" type="number" min="0" />
        位置Y：<input name="Yplace" id="Yplace" type="number" min="0" />
        <span id="show">宽度：<input type="number" id="border_width" name="border_width" min="0" /></span>
        <button id="GetImage">绘制</button>
    </body>
</html>

 

1.绘制矩形较为简单 掌握上面的方法属性即可

 基本流程： 得到画布的标签引用  -------> 指定画布类型 ------->确定颜色( ------->指定边框宽度) ------->调用方法填入x,y,width,height   ------->清楚画布 即可完成画矩阵

 

posted @ 2018-04-04 10:47  widosad  阅读(83)  评论(0)    收藏  举报