Canvas标签绘制图形

作者: akubaba | 来源:发表于2017-11-03 12:04 被阅读29次

canvas笔记
canvas 画出动态折线图
Canvas标签
Canvas绘制线
bunny笔记|canvas常用的基础方法以及属性
HTML5 Canvas
HTML5Canvas
前端小项目：使用canvas绘画哆啦A梦
HTML5_Canvas
记录canvas学习1

内容整理自网上！
CanvasRenderingContext2D参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/fillRect

一、绘制图

代码：

<script>
        var CANVAS_WIDTH=500;
        var CANVAS_HEIGHT=500;
        var canvas,context;
        window.onload=function () {
            createCanvas();
            drawRect();
        }
        function createCanvas() {
            document.body.innerHTML="<canvas id='canvas' width='"+CANVAS_WIDTH+"' height='"+CANVAS_HEIGHT+"'></canvas>";
            canvas=document.getElementById('canvas');
            context=canvas.getContext('2d');
        }
        function drawRect() {
            //填充颜色
            context.fillStyle='#4169e1';

            //context.rotate(45);//角度
            //context.translate(200,200);//移动
            //context.scale(2,0.5);//缩放

            //绘制填充矩形，矩形的起点在 (x, y) 位置，矩形的尺寸是 width 和 height
            context.fillRect(0,0,100,100);
        }
    </script>

二、绘制图片

代码：

        function drawImage() {
            var img=new Image();
            img.onload=function () {
                context.drawImage(img,0,0);
            }
            img.src='resource/ok.jpg';
        }

三、绘制圆

效果图：

好多圆

代码：

        function draw(id) {
            var canvas=document.getElementById(id);
            if(canvas==null){
                return false;
            }
            var context=canvas.getContext('2d');
            context.fillStyle="#eeeeef";
            context.fillRect(0,0,300,400);
            for(var i=0;i<10;i++){
                context.beginPath();
                context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
//参数分别为x轴坐标、y轴坐标、圆的半径、圆弧的起始点（x轴方向开始计算）、圆弧终点、true为逆时针绘制，false为顺时针绘制
                context.closePath();//一定要关闭路径！！
                context.fillStyle="rgba(255,0,0,0.25)";//0.25是透明度
                context.fill();
            }
        }

四、绘制渐变图形

效果图：

渐变图

代码：

        function draw(id) {
            var canvas=document.getElementById(id);
            if(canvas==null){
                return false;
            }
            var context=canvas.getContext('2d');
            var g1=context.createLinearGradient(0,0,0,300);
            //参数起点的x轴坐标、起点y轴坐标、终点的x轴坐标、终点的y轴坐标
            g1.addColorStop(0,'rosybrown');
            g1.addColorStop(1,'white');
            context.fillStyle=g1;
            context.fillRect(0,0,500,500);
        }

效果图：

渐变图形

        function draw(id) {
            var canvas=document.getElementById(id);
            if(canvas==null){
                return false;
            }
            var context=canvas.getContext('2d');
            var g1=context.createLinearGradient(0,0,0,300);
            //参数起点的x轴坐标、起点y轴坐标、终点的x轴坐标、终点的y轴坐标
            g1.addColorStop(0,'rosybrown');
            g1.addColorStop(1,'white');
            context.fillStyle=g1;
            context.fillRect(0,0,500,500);
            var g2=context.createLinearGradient(0,0,300,0);
            g2.addColorStop(0,'rgba(0,0,255,0.5)');
            g2.addColorStop(1,'rgba(255,0,0,0.5)');
            for(var i=0;i<10;i++){
                context.beginPath();
                context.fillStyle=g2;
                context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
                context.closePath();
                context.fill();
            }
        }

效果图：

五角星+阴影效果

代码：

        function draw(id) {
            var canvas=document.getElementById(id);
            if(canvas==null){
                return false;
            }
            var context=canvas.getContext('2d');
            context.fillStyle='#eeeeef';
            context.shadowOffsetX=10;
            context.shadowOffsetY=10;
            context.shadowColor='rgba(100,100,100,0.5)';
            context.shadowBlur=7.5;
            context.translate(0,50);
            for(var i=0;i<3;i++){
                context.translate(50,50);
                create5Star(context);
                context.fill();
            }
        }
        function create5Star(context) {
            var n=0;
            var dx=100;
            var dy=0;
            var s=50;
            context.beginPath();
            context.fillStyle='rgba(255,0,0,0.5)';
            var x=Math.sin(0);
            var y=Math.cos(0);
            var dig=Math.PI/5*4;
            for(var i=0;i<5;i++){
                var x=Math.sin(i*dig);
                var y=Math.cos(i*dig);
                context.lineTo(dx+x*s,dy+y*s);
            }
            context.closePath();
        }

五、使用库绘制

下载库（github源码）：https://createjs.com/downloads
说明文档：\EaselJS-master\docs\EaselJS_docs里面的index.html
引入文件：\EaselJS-master\lib\easeljs.min.js

绘制文本
代码：

    <canvas id="canvas" width="500px" height="500px"></canvas>
    <script>
        var canvas;
        var stage;
        var txt;
        window.onload = function(){
            canvas = document.getElementById("canvas");
            stage = new createjs.Stage(canvas);
            txt=new createjs.Text("number->","20px Arial","rosybrown");//文字、大小字体、颜色
            stage.addChild(txt);
            stage.update();
        }
    </script>

动态图实现效果：

动态图

代码：

    <canvas id="canvas" width="500px" height="500px"></canvas>
    <script>
        var canvas;
        var stage;
        var txt;
        var count=0;
        window.onload = function(){
            canvas = document.getElementById("canvas");
            stage = new createjs.Stage(canvas);
            txt=new createjs.Text("number->0","20px Arial","rosybrown");//文字、大小字体、颜色
            stage.addChild(txt);
            createjs.Ticker.setFPS(30);//页面每秒显示30帧
            createjs.Ticker.addEventListener('tick',tick);
        }
        function tick(e) {
            count++;
            txt.text="number->"+count;
            stage.update();
        }
    </script>

更酷炫的可以参考\EaselJS-master\examples！
实现效果：

酷炫效果

代码：

<body>
    <canvas id="canvas" width="500px" height="500px"></canvas>
    <script>
        var canvas;
        var stage;
        var img=new Image();
        var sprite;
        window.onload = function(){
            canvas = document.getElementById("canvas");
            stage = new createjs.Stage(canvas);

            stage.addEventListener('stagemousedown',clickCanvas);
            stage.addEventListener('stagemousemove',moveCanvas);

            var data={
                images:['resource/spritesheet_sparkle.png'],
                frames:{width:20,height:20,regX:10,regY:10}
            }
            sprite  = new createjs.Sprite(new createjs.SpriteSheet(data));
            createjs.Ticker.setFPS(20);
            createjs.Ticker.addEventListener("tick",tick);
        }
        function tick(e){
            var t = stage.getNumChildren();
            for(var i = t-1;i>0;i--){
                var s = stage.getChildAt(i);

                s.vY +=2;
                s.vX +=1;
                s.x += s.vX;
                s.y += s.vY;

                s.scaleX = s.scaleY =s.scaleX+ s.vS;
                s.alpha += s.vA;

                if(s.alpha <= 0 || s.y >canvas.height){
                    stage.removeChildAt(i);
                }
            }
            stage.update(e);
        }
        function clickCanvas(e){
            addS(Math.random()*200 + 100,stage.mouseX,stage.mouseY,2);
        }

        function moveCanvas(e){
            addS(Math.random()*2 + 1,stage.mouseX,stage.mouseY,1);
        }
        function addS(count,x,y,speed) {
            for(var i=0;i<count;i++){
                var s=sprite.clone();
                s.x=x;
                s.y=y;
                s.alpha=Math.random()*0.5+0.5; //透明度的变化
                s.scale=s.scaleY=Math.random()+0.3; //缩放的效果

                var a=Math.PI*2*Math.random();
                var v=(Math.random()-0.5)*30*speed;
                s.vX=Math.cos(a)*v;
                s.vY=Math.sin(a)*v;
                s.vS=(Math.random()-0.5)*0.2; //scale的变化
                s.vA=-Math.random()*0.05-0.01;//alpha的变化
                stage.addChild(s);
            }
        }
    </script>
</body>