当前位置: 澳门新濠3559 > 编程 > 正文

这篇文章会介绍使用, 通过使用表示三次贝塞尔

时间:2019-12-27 17:08来源:编程
代码1如下:!DOCTYPEhtmlhtmlheadmetacharset="UTF-8"title/titlescriptsrc="js/jquery-3.1.1.min.js"/script/headbodyonload="draw('canvas')"canvas/canvasscriptvarx,y,x1,y1;$(function(){draw("canvas");})functiondraw(id){varcvs=document.getEle

代码1如下:!DOCTYPEhtmlhtmlheadmetacharset="UTF-8"title/titlescriptsrc="js/jquery-3.1.1.min.js"/script/headbodyonload="draw('canvas')"canvas/canvasscriptvarx,y,x1,y1;$(function(){draw("canvas");})functiondraw(id){varcvs=document.getElementById(id);varctx=cvs.getContext('2d');//画笔ctx.fillStyle="rgba(255,0,0,3)";ctx.lineWidth=1;ctx.beginPath();ctx.moveTo(170,438);ctx.lineTo(333,438);ctx.closePath();ctx.fill();ctx.stroke();}/script/body/html代码2如下:!DOCTYPEhtmlhtmlheadmetacharset="UTF-8"title/titlescriptsrc="js/jquery-3.1.1.min.js"/script/headbodyonload="draw('canvas')"canvas/canvasscriptvarx,y,x1,y1;$(function(){draw("canvas");})functiondraw(id){varcvs=document.getElementById(id);varctx=cvs.getContext('2d');//画笔ctx.fillStyle="rgba(255,0,0,3)";ctx.lineWidth=1;ctx.beginPath();ctx.moveTo(10,100);ctx.lineTo(10,100);ctx.closePath();ctx.fill();ctx.stroke();}/script/body/html

由于网上很多都是用很多算法和逻辑使用canvas进行绘制,但有时也无法解决一些小众需求

如何使用 HTML5 Canvas 制作水波纹效果,html5canvas

  今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果。水波效果以图片为背景,点击图片任意位置都会触发。有时候,我们使用普通的 Javascript 就可以创建一个很有趣的解决功能。

 

 

在线演示      源码下载

 

 

图片 1

Step 1. HTML

和以前一样,首先是 HTML 代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title>Water drops effect</title>
        <link rel="stylesheet" href="css/main.css" type="text/css" />
        <script src="js/vector2d.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/waterfall.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="example">
            <h3><a href="#">Water drops effect</a></h3>

            <canvas id="water">HTML5 compliant browser required</canvas>
            <div id="switcher">
                <img onclick='watereff.changePicture(this.src);' src="data_images/underwater1.jpg" />
                <img onclick='watereff.changePicture(this.src);' src="data_images/underwater2.jpg" />
            </div>
            <div id="fps"></div>
        </div>
    </body>
</html> 

<canvas id="canvas" style="width:500px;height:500px;background:#999">ddafc</canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var context=canvas.getContext('2d');
context.lineWidth=1;
context.strokeStyle="red";
context.moveTo(50,50);
context.lineTo(100,50);
context.lineTo(100,100);
context.lineTo(50,100);
context.closePath();
//context.lineTo(50,50);
context.stroke();

    为了满足需求不能写运算纯手写,感觉真的很浪费时间,只有自己踩过的坑,才不想看到别人也被坑。我很懒,也想过弄个工具,目前先放代码吧,方便需要的人copy。

Step 2. CSS

这是用到的 CSS 代码:

body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:600px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}

#water {
    width:500px;
    height:400px;
    display: block;
    margin:0px auto;
    cursor:pointer;
}
#switcher {
    text-align:center;
    overflow:hidden;
    margin:15px;
}
#switcher img {
    width:160px;
    height:120px;
}

context.beginPath();
context.lineWidth=5;
context.strokeStyle="pink";

    <canvas> H5标签,只是图形容器,您必须使用脚本来绘制图形。

Step 3. JS

下面是主要的 JavaScript 代码:

function drop(x, y, damping, shading, refraction, ctx, screenWidth, screenHeight){
    this.x = x;
    this.y = y;
    this.shading = shading;
    this.refraction = refraction;
    this.bufferSize = this.x * this.y;
    this.damping = damping;
    this.background = ctx.getImageData(0, 0, screenWidth, screenHeight).data;
    this.imageData = ctx.getImageData(0, 0, screenWidth, screenHeight);

    this.buffer1 = [];
    this.buffer2 = [];
    for (var i = 0; i < this.bufferSize; i++){
        this.buffer1.push(0);
        this.buffer2.push(0);
    }

    this.update = function(){
        for (var i = this.x + 1, x = 1; i < this.bufferSize - this.x; i++, x++){
            if ((x < this.x)){
                this.buffer2[i] = ((this.buffer1[i - 1] + this.buffer1[i + 1] + this.buffer1[i - this.x] + this.buffer1[i + this.x]) / 2) - this.buffer2[i];
                this.buffer2[i] *= this.damping;
            } else x = 0;
        }

        var temp = this.buffer1;
        this.buffer1 = this.buffer2;
        this.buffer2 = temp;
    }

    this.draw = function(ctx){
        var imageDataArray = this.imageData.data;
        for (var i = this.x + 1, index = (this.x + 1) * 4; i < this.bufferSize - (1 + this.x); i++, index += 4){
            var xOffset = ~~(this.buffer1[i - 1] - this.buffer1[i + 1]);
            var yOffset = ~~(this.buffer1[i - this.x] - this.buffer1[i + this.x]);
            var shade = xOffset * this.shading;
            var texture = index + (xOffset * this.refraction  + yOffset * this.refraction * this.x) * 4;
            imageDataArray[index] = this.background[texture] + shade; 
            imageDataArray[index + 1] = this.background[texture + 1] + shade;
            imageDataArray[index + 2] = 50 + this.background[texture + 2] + shade;
        }
        ctx.putImageData(this.imageData, 0, 0);
    }
}

var fps = 0;

var watereff = {
    // variables
    timeStep : 20,
    refractions : 2,
    shading : 3,
    damping : 0.99,
    screenWidth : 500,
    screenHeight : 400,
    pond : null,
    textureImg : null,
    interval : null,
    backgroundURL : 'data_images/underwater1.jpg',

    // initialization
    init : function() {
        var canvas = document.getElementById('water');
        if (canvas.getContext){

            // fps countrt
            fps = 0;
            setInterval(function() { 
                document.getElementById('fps').innerHTML = fps / 2 + ' FPS'; 
                fps = 0;
            }, 2000);

            canvas.onmousedown = function(e) {
                var mouse = watereff.getMousePosition(e).sub(new vector2d(canvas.offsetLeft, canvas.offsetTop));
                watereff.pond.buffer1[mouse.y * watereff.pond.x + mouse.x ] += 200;
            }
            canvas.onmouseup = function(e) {
                canvas.onmousemove = null;
            }

            canvas.width  = this.screenWidth;
            canvas.height = this.screenHeight;
            this.textureImg = new Image(256, 256);
            this.textureImg.src = this.backgroundURL;
            canvas.getContext('2d').drawImage(this.textureImg, 0, 0);
            this.pond = new drop(
                this.screenWidth, 
                this.screenHeight, 
                this.damping,
                this.shading, 
                this.refractions,
                canvas.getContext('2d'),
                this.screenWidth, this.screenHeight
            );
            if (this.interval != null){
                clearInterval(this.interval);
            }
            this.interval = setInterval(watereff.run, this.timeStep);
        }
    },

    // change image func
    changePicture : function(url){
        this.backgroundURL = url;
        this.init();
    },

    // get mouse position func
    getMousePosition : function(e){
        if (!e){
            var e = window.event;
        } 
        if (e.pageX || e.pageY){
            return new vector2d(e.pageX, e.pageY);
        } else if (e.clientX || e.clientY){
            return new vector2d(e.clientX, e.clientY);
        } 
    },

    // loop drawing
    run : function(){
        var ctx = document.getElementById('water').getContext('2d');
        watereff.pond.update();
        watereff.pond.draw(ctx);
        fps++;
    }
}

window.onload = function(){
    watereff.init();
}

  正如你所看到的,这里使用 Vector2D 函数,这个函数在 vector2d.js 里提供了。另一个很难的方法是使用纯数学实现,感兴趣的可以自己实验一下。

 

您可能感兴趣的相关文章

  • Web 前端开发人员和设计师必读精华文章推荐
  • 精心挑选的优秀jQuery Ajax分页插件和教程
  • 12个让人惊叹的的创意的 404 错误页面设计
  • 让网站动起来!12款优秀的 jQuery 动画插件
  • 8个前沿 HTML5 & CSS3 效果【附源码下载】

 

本文链接:如何使用 HTML5 Canvas 制作水波纹效果

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

本文来自【梦想天空(

context.rect(80,80,60,60);//第一种方法
context.stroke();
</script>

    lineTo() 方法 添加一个新点,然后创建从该点到画布中最后指定点的线条

怎用html5 canvas画锯齿图

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>锯齿图</title>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded(){
var x,y;
var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2d");
//context.fillStyle = "#000000";
//context.fillStyle = '#EEEEEE';
//context.fillRect(0, 0, theCanvas.width, theCanvas.height);
//Box
context.strokeStyle = '#000000';
context.lineWidth=10;
context.strokeRect(0, 0, theCanvas.width-0, theCanvas.height-0);
context.fillStyle = "#000000";
for(x=5;x<=canvas.width;x=x+10){
context.beginPath();
context.arc(x,5,5,0,Math.PI*2,true);
context.arc(x,canvas.height-5,5,0,Math.PI*2,true);
context.closePath();
context.fill();
}
for(y=5;y<=canvas.height;y=y+10){
context.beginPath();
context.arc(5,y,5,0,Math.PI*2,true);
context.arc(canvas.width-5,y,5,0,Math.PI*2,true);
context.closePath();
context.fill();
}
}
</script>
</head>
<body>
<div style="position: absolute; top: 0px; left: 0px;">
<canvas id="canvas" width="200" height="200" top=50px; left=50px;>
</div>
</body>
</html>

代码运行出来就是
本人QQ812397704...余下全文>>  

beginPath:在上一个图的基础上重新绘制另一个图;

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

怎使用html5的canvas 做一个曲线图 附小例子

<!DOCTYPE HTML><html><title>canvas test</title><head><style>#canvas{ width:800px; height:800px; box-shadow: 0px 0px 10px rgba(0, 0, 0, .8); margin: 10px 10px;}</style></head><body> <canvas id='canvas' width=800 height=800>unsupport</canvas></body><script>window.onload = function(){ var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.strokeColor = 'black'; ctx.lineWidth = 3; ctx.shadowOffsetX = 10; ctx.shadowOffsetY = 5; ctx.shadowBlur = 2; ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; ctx.save(); ctx.translate(100, 100); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(400, 0); ctx.moveTo(0, 0); for(var i = 0; i < 20; i += 0.1){ var x = i * 20; var y = Math.sin(i) * 20; ctx.lineTo(x, y); } ctx.stroke(); ctx.restore(); ctx.save(); ctx.translate(100, 200); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(400, 0); ctx.moveTo(0, 0); ctx.quadraticCurveTo(150, -100, 200, 0); ctx.quadraticCurveTo(250, 200, 400, 0); ctx.stroke(); ctx.restore(); ctx.save(); ctx.translate(100, 400); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(400, 0); ctx.moveTo(0, 0); ctx.bezierCurveTo(50, 0, 100, -50, 150, -100); ctx.bezierCurveTo(175, -75, 150, -25, 100, 0); ctx.bezierCurveTo(300, -75, 600, -......余下全文>>
图片 2  

HTML5 Canvas 制作水波纹效果,html5canvas 今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效...

**rect(x,y,w,h):绘制矩形的起点坐标及长宽**

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

 

 

 

说明:网上有高级算法的绘制,很灵活也很方便,如果不是特使情况,千万别用我的方法,请上网右转看别人的案例,哈哈。

<canvas id="canvas" style="width:500px;height:500px;background:#999">ddafc</canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var context=canvas.getContext('2d');
context.beginPath();
context.lineWidth=5;
context.strokeStyle="pink";
context.rect(10,10,60,60);
context.stroke();

 

context.beginPath();
context.lineWidth=5;
context.strokeStyle="red";

☆ canvas画布节点(仅供参考)

context.strokeRect(10,80,60,60);//第二种方法**

<canvas id="myCanvas" width="264" height="264" style="border:red 1px solid;position:absolute;top:0;left:0"></canvas>

 

 

**strokeRect(x,y,w,h):相当于rect和stroke的结合体;**

  1. 雨伞

 

<script type="text/javascript">
    
        function draw(id) {
                var canvas=document.getElementById(id);
                if(canvas==null)
                return false;
                var ctx=canvas.getContext('2d');
                ctx.beginPath();
                
                // 小雨点
                ctx.moveTo(47,32);
                ctx.bezierCurveTo(40,42,38,56,46,60);
                ctx.bezierCurveTo(64,52,50,40,47,32);
                
                // 大雨点
                ctx.moveTo(78,32);
                ctx.bezierCurveTo(70,44,62,66,78,70);
                ctx.bezierCurveTo(104,60,80,40,78,32);
                
                // 伞身
                ctx.moveTo(44,118);
                ctx.bezierCurveTo(48,114,50,90,72,76);
                ctx.bezierCurveTo(82,82,104,70,102,54);
                ctx.bezierCurveTo(138,26,222,76,224,118);
                ctx.lineTo(146,118);
                ctx.lineTo(146,200);
                
                ctx.bezierCurveTo(147,212,162,216,162,192);
                ctx.bezierCurveTo(168,188,172,186,178,192);
                ctx.bezierCurveTo(180,200,182,218,162,231);
                ctx.bezierCurveTo(154,240,116,226,122,200);
                
                ctx.lineTo(122,118);
                ctx.lineTo(44,118);
                var gradient=ctx.createRadialGradient(0,0,0,0,0,150);
                gradient.addColorStop(0,"rgba(244,28,285,0.1)");
                gradient.addColorStop(1,"rgba(255,255,255,1)");
                
                ctx.strokeStyle = "red"; //设置或返回用于笔触的颜色、渐变
                ctx.stroke();
                
                ctx.fillStyle=gradient;
                ctx.fill();
        }
    </script>

**以下两种是有填充的**

 

**//第三种方法**

  1. 飞机

 

<script type="text/javascript">
    
        function draw(id) {
                var canvas=document.getElementById(id);
                if(canvas==null)
                return false;
                var ctx=canvas.getContext('2d');
                ctx.beginPath();
                ctx.moveTo(65,50);
                ctx.lineTo(156,70);
                ctx.lineTo(190,38);
                ctx.bezierCurveTo(222,10,250,40,230,70);
                ctx.lineTo(195,106);
                ctx.lineTo(218,204);
                ctx.lineTo(186,228);
                ctx.lineTo(150,146);
                ctx.lineTo(110,186);
                ctx.bezierCurveTo(118,200,126,220,98,234);
                ctx.lineTo(30,162);
                ctx.bezierCurveTo(30,134,70,140,78,152);
                ctx.lineTo(118,114);
                ctx.lineTo(40,78);
                ctx.lineTo(65,50);
                /*ctx.bezierCurveTo(75,37,70,25,50,25);
                ctx.bezierCurveTo(20,25,22,62.5,22,55);
                ctx.bezierCurveTo(20,80,40,102,75,120);
                ctx.bezierCurveTo(110,102,130,80,128,55);
                ctx.bezierCurveTo(128,55,130,25,100,25);
                ctx.bezierCurveTo(85,25,75,37,75,40);*/
                
                var gradient=ctx.createRadialGradient(0,0,0,0,0,150);
                gradient.addColorStop(0,"rgba(244,28,285,0.1)");
                gradient.addColorStop(1,"rgba(255,255,255,1)");
                
                ctx.strokeStyle = "red"; //设置或返回用于笔触的颜色、渐变
                ctx.stroke();
                
                ctx.fillStyle=gradient;
                ctx.fill();
        }
    </script>

context.beginPath();
context.lineWidth=5;

 

context.fillStyle="pink";//填充色
context.rect(80,10,60,60);

  1. 五角星

context.fill();//与stroke方法作用相同

<script>
        //function init() {
        
            var canvas = document.getElementById('stars');
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = "#827839";
            //ctx.shadowColor = "#000000";
            ctx.shadowOffsetX = 1;
            ctx.shadowOffsetY = 12;
            ctx.shadowBlur = 18;
            
            
            // 开始一条新路径
            ctx.beginPath();
            /*ctx.moveTo(15,150)   +30   -8
            ctx.lineTo(100,140);        // 2
            ctx.lineTo(170,80);            // 3
            ctx.lineTo(230,140);        // 4
            ctx.lineTo(315,150);        // 5
            ctx.lineTo(230,200);        // 6
            ctx.lineTo(300,263);        // 7
            ctx.lineTo(170,220);        // 8
            ctx.lineTo(30,263);            // 9
            ctx.lineTo(100,200);        // 10
            
            //ctx.lineTo(15,150);    // 结束
            ctx.closePath();
            ctx.fill();*/
           
            ctx.moveTo(45,142);        // 起点
            ctx.lineTo(129,126);        // 2
            ctx.lineTo(172,40);            // 3
            ctx.lineTo(215,126);        // 4
            ctx.lineTo(299,142);        // 5
            ctx.lineTo(240,203);        // 6
            ctx.lineTo(252,288);        // 7
            ctx.lineTo(172,252);        // 8
            ctx.lineTo(92,288);            // 9
            ctx.lineTo(105,203);        // 10
            
            //ctx.lineTo(15,150);    // 结束
            ctx.closePath();
            ctx.fill();
        //}
        
        //window.addEventListener("load",init.false);
    </script>

 

 

//第四种方法
context.beginPath();
context.lineWidth=5;
context.fillStyle="red";
context.fillRect(80,80,60,60);

  1. 桃心

 

<script type="text/javascript">
        function draw(id) {
                var canvas=document.getElementById(id);
                if(canvas==null)
                return false;
                var ctx=canvas.getContext('2d');
                ctx.beginPath();
                ctx.moveTo(75,40);
                ctx.bezierCurveTo(75,37,70,25,50,25);
                ctx.bezierCurveTo(20,25,22,62.5,22,55);
                ctx.bezierCurveTo(20,80,40,102,75,120);
                ctx.bezierCurveTo(110,102,130,80,128,55);
                ctx.bezierCurveTo(128,55,130,25,100,25);
                ctx.bezierCurveTo(85,25,75,37,75,40);
                var gradient=ctx.createRadialGradient(0,0,0,0,0,150);
                gradient.addColorStop(0,"rgba(244,28,285,0.5)");
                gradient.addColorStop(1,"rgba(255,255,255,1)");
                ctx.fillStyle=gradient;
                ctx.fill();
        }

 

    </script>

个人公众号(ZEROFC_DEV),关于web开发的,欢迎关注O(∩_∩)O~

图片 3

编辑:编程 本文来源:这篇文章会介绍使用, 通过使用表示三次贝塞尔

关键词: