html5贝塞尔曲线（css贝塞尔曲线）

今天给各位分享html5贝塞尔曲线的知识，其中也会对css贝塞尔曲线进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

本文目录一览：

• 1、javascript怎么画贝塞尔曲线
• 2、HTML5用canvas怎么实现动画效果
• 3、html5画布图形怎么绝对定位怎么设置
• 4、如何用HTML5技术画一条二维曲线
• 5、在html5.0中，怎样在页面上放置一个canvas元素
• 6、html5 canvas怎么画出斜向的椭圆

javascript怎么画贝塞尔曲线

script type="text/javascript"

window.onload = function(){

var c = document.getElementById("myCanvas");

var content = c.getContext("2d");

//绘制二次方贝塞尔曲线或游

content.strokeStyle ="#FF5D43";

content.beginPath();

content.moveTo(0,200);

content.quadraticCurveTo(75,50,300,200);

content.stroke();

content.globalCompositeOperation = "source-over"; //目标图像上显示源图像

//绘制上面曲线的控唯帆制指团雹点和控制线，控制点坐标为两直线的交点(75,50)

content.strokeStyle = "#f0f";

content.beginPath();

content.moveTo(75,50);

content.lineTo(0,200);

content.moveTo(75,50);

content.lineTo(300,200);

content.stroke();

};

HTML5用canvas怎么实现动画效果

HTML5用canvas实现动画效果的方法：

!DOCTYPE HTML

html

head

  style

    body {

      margin: 0px;

      padding: 0px;

    }

  /style

/head

body

  canvas id="myCanvas" width="578" height="200"/canvas

  script

    window.requestAnimFrame = (function(callback) {

      return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||

      function(callback) {

        window.setTimeout(callback, 1000 / 60);

      };

    })();

    function drawRectangle(myRectangle, context) {

      context.beginPath();

      context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);

      context.fillStyle = '#8ED6FF';

      context.fill();

      context.lineWidth = myRectangle.borderWidth;

      context.strokeStyle = 'black';

      context.stroke();

    }

    function animate(myRectangle, canvas, context, startTime) {

      // update

      var time = (new Date()).getTime() - startTime;

      var linearSpeed = 100;

      // pixels / second

   备旁   var newX = linearSpeed * time / 1000;

      if(newX canvas.width - myRectangle.width - myRectangle.borderWidth / 2) {

        myRectangle.x = newX;

      }

      // clear

      context.clearRect(0, 0, canvas.width, canvas.height);

      drawRectangle(myRectangle, context);

      // request new frame

      requestAnimFrame(function() {

        animate(myRectangle, canvas, context, startTime);

      });

   局肢 }

    var canvas = document.getElementById('myCanvas');

    var context = canvas.getContext('2d');

    var myRectangle = {

      x: 0,

      y: 75,

      width: 100,

      height: 50,

      borderWidth: 5

    };

 仿腊橡   drawRectangle(myRectangle, context);

    // wait one second before starting animation

    setTimeout(function() {

      var startTime = (new Date()).getTime();

      animate(myRectangle, canvas, context, startTime);

    }, 1000);

  /script

/body

实现效果：

html5画布图形怎么绝对定位怎么设置

步骤 1: 在 HTML 中设置画布，创建一个引用，并获取上下文对象

画布在 HTML 中通过 canvas 标签定义。与其他标签类似，canvas 的属性（如宽度和高度）作为特性输入。宽拍假设你希望创建一个宽 500 像素、高 500 像素的画布，并将其历仿命名为“can1”，稍后在 JavaScript 中引用它时将用到。

在 HTML 文档中输入 canvas 标签。

1

canvas id="can1" width="500" height="500"/canvas

在 JavaScript 文档中，创建一个变量，在编写脚本时该变量将代替“can1”。这里，我们将该变量命名为“myCanvas”，并使用 getElementById 将其链接到“can1”。

1

var myCanvas = document.getElementById("can1");

画布的 CanvasRenderingContext2D 对象具有操作画布的所有命令。 这里，在上下文对象中检索“can1”。将此变量称为“myContext”。

1

var myContext = myCanvas.getContext("2d");

步骤 2: 绘制矩形、直线、贝塞尔曲线、圆和形状

在画布上绘制简单的线条非常容易。使用 JavaScript 的 moveTo 方法可设置线条开始位置的坐标。然后只需使用另一方法设置终点。 第二步可以使用若干方法，每种方法专用于帮助呈现一种不同的线型，无论是直线、贝塞尔曲线还是圆弧。若要将线条合并为形状，可以闭合对 beginPath 和 closePath 方法调用中的线条。在指定所需的外观之后，可以使用 fill 方法应用颜色，并使用 stroke 方法执行线条和形状的呈现。

应用一些基本风格。这里，通过使用 fillStyle 属性绘制一个黑色矩形，将画布背景设置为黑色 (#000)。然后使用 strokeStyle 属性将线条颜色设置为白色 (#fff)，使用 fillRect 方法应用黑色背景，并使用 lineWidth 属性将线条的粗细设置为 3 个像慎烂羡素。

// Specify a black background, and white lines that are 3 pixels thick.

myContext.fillStyle = '#000';

myContext.strokeStyle = '#fff';

myContext.fillRect(0,0,500,500);

myContext.lineWidth = 3;myContext.fill();

在后续步骤中，将在这个 500×500 的黑色画布上继续构建。

现在，准备在画布的黑色表面绘制一个白色线条。先从直线开始。

使用 moveTo 方法设置直线的起点，使用 lineTo 方法设置终点。

这些方法采用两个数字作为参数。第一个数字表示 x 轴坐标，或者表示此坐标定义的自画布左侧算起的像素数。第二个数字是从顶部开始测量的 y 轴坐标。

// Draw a line that starts at the upper left corner of the canvas and ends at the lower right.

myContext.moveTo(0,0);

myContext.lineTo(500,500);

myContext.stroke();

若要绘制二次贝塞尔曲线，请使用 quadraticCurveTo 方法，该方法采用两个坐标—曲线的一个控制点和一个端点。

// Draw a swooping curve that spans the width of the canvas.

myContext.moveTo(0,0);

myContext.quadraticCurveTo(0,500,500,250);

myContext.stroke();

若要绘制三次贝塞尔曲线，请使用 bezierCurveTo 方法，该方法采用三个坐标—曲线的两个控制点和一个端点。

// Draw a V-shaped Bezier curve that spans the entire canvas.

myContext.moveTo(0,0);

myContext.bezierCurveTo(500, 820, 0, 500, 500, 0);

myContext.stroke();

若要创建一个圆，请使用 arc 方法：在设置用于绘制圆形轮廓的原点时，请确保将 moveTo 方法设置在沿线条路径的位置上，否则圆上将有一条通向 moveTo坐标的“尾巴”。

// Draw a circle that spans the width of the canvas.

myContext.moveTo(500,250);

myContext.arc(250,250,250,0,Math.PI*2,true);

myContext.stroke();

通过闭合对 beginPath 和 closePath 调用中的多个线条，可以从上述线条的任意组合中绘制一个 2D 形状。然后，整个形状可以使用 fill 接收一种颜色。前面设置的笔划样式将创建白色线条，在与应用于主体的红色 (#f00) 合并时，该形状将继承双色调外观。

// Draw a red diamond that spans the entire canvas.

myContext.fillStyle = '#f00';

myContext.beginPath();

myContext.moveTo(250,0);

myContext.lineTo(0,250);

myContext.lineTo(250,500);

myContext.lineTo(500,250);

myContext.closePath();

myContext.fill();

步骤 3: 显示位图图像

位图图像（如 .jpg、.png 和 .gif 文件）可以放置在画布上，甚至可以在代码中缩放和裁剪，不会触及原始文件。若要添加位图图像，请指定该图像的 URI，然后使用 drawImage 方法在画布上指定其位置。使用可选参数可将图像缩放到指定的大小，甚至仅显示图像的一个片段，这对于实现滚动背景或使用子画面表动态显示子画面等操作非常有用。

若要在屏幕上绘制位图图像而不进行任何修改，请指定要用于左上角的 x 坐标和 y 坐标。

如何用HTML5技术画一条二维曲线

最近项目中的设计图上有一条曲线设计风格，就想着能不用切图的方法实现吗？（毕竟切图好讨厌的 (≧▽≦)/ ）。就研究了一下实现方式。在此，给大家做一下参考。

大家都知道，CSS3中border已经可以实现一定的弧度。因此，就想着可以利用border的特性画一条曲线。

1.首先我们先建一个 div 元素

2.给它一些基本样式

最终效果：

从效果上看，这个方法实现的曲线过渡处不够平滑，仍存在较大缺陷。下面就介绍老备两个更加常用的方法。

在搜索实现方案的过程中，发现一个好用的 工具 ,可以用它来调试出复杂的曲线迹纤。根据设计稿的线条，很快就调试出来一个svg的路径参数。

接着，修饰一下该曲线，就能得到我们所需要的效果了。

最终效果如图：

发现Canvas真的是个好东西，可以用前端实现很多特效。当然画个曲线对于它来说，简直小菜一碟。

这里会用到姿含仿贝塞尔曲线（bezierCurve)的一些知识。该曲线会利用到四个点作为定位点，分别为头和尾点还有两个控制点用来控制整个曲线的形状和曲率。具体可以参考 维基百科 上的相关介绍。

1.创建一个 canvas 元素

2.利用 bezierCurveTo 这个方法来画该曲线。由于这个方法相关参数难以确定，我同样选择了一个 工具 来获取所需要的具体参数数值。

至此，我们就得到了我们想要的曲线了。

How to Draw Quadratic Curves on an HTML5 Canvas

在线SVG编辑器

MDN SVG Tutorial

在html5.0中，怎样在页面上放置一个canvas元素

canvas是h5的一大亮点。这是我之前学习做的笔记，可以参大脊考一下：

!DOCTYPE html

html

head

meta charset="UTF-8"

titlecanvas 教程 --- ITDragon博客 /title

style

canvas{background: #F9F9F9;border:1px solid #000;}

.one,.two,.thr,.four{float:left;margin-left: 200px;}

/style

script type="text/javascript" src="" /镇仿判script

script

$(function(){

// 创建2d的画图环境

var canvas_2d = document.getElementById("canvas-test").getContext("2d");

// fillRect() 绘制“被填充”的矩形 / 前两个数是坐标，后两个是像素大小

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

// strokeRect() 绘制矩形（无填充）

canvas_2d.strokeRect(100,0,100,100);

// fillStyle 设置或返回用于填充绘画的颜色、渐变或模式

canvas_2d.fillStyle = "rgba(0,0,0,0.8)";

// strokeStyle 设置或返回用于御改笔触的颜色、渐变或模式

canvas_2d.strokeStyle = "cadetblue";

// shadowColor 设置或返回用于阴影的颜色

canvas_2d.shadowColor = "rgba(3,3,3,0.6)"

// shadowBlur 设置或返回用于阴影的模糊级别

canvas_2d.shadowBlur = 10;

// shadowOffsetX 设置或返回阴影距形状的水平距离

canvas_2d.shadowOffsetX = 4;

// shadowOffsetY 设置或返回阴影距形状的垂直距离

canvas_2d.shadowOffsetY = 4;

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

canvas_2d.strokeRect(300,0,100,100);

// createLinearGradient() 创建线性渐变。前两个是渐变起点坐标，后两个便是结束坐标

var linearGradient = canvas_2d.createLinearGradient(100,100,100,200);

// addColorStop() 规定渐变对象中的颜色和停止位置

linearGradient.addColorStop(0,"#000");

linearGradient.addColorStop(1,"#eee");

canvas_2d.fillStyle = linearGradient;

canvas_2d.fillRect(100,100,100,100);

// createRadialGradient() 创建放射状/环形的渐变。每三个为一组，前两个是坐标后一个是半径

var radialGradient = canvas_2d.createRadialGradient(350,150,40,350,150,80);

radialGradient.addColorStop(0,"#eee");

radialGradient.addColorStop(1,"#000");

canvas_2d.fillStyle = radialGradient;

canvas_2d.fillRect(300,100,100,100);

// createPattern() 在指定的方向上重复指定的元素这个我就不试了

/*---------------------one-----------分割线------------two-----------------------*/

var $canvas_line = document.getElementById("canvas-line");

var canvas_2d_line = $canvas_line.getContext("2d");

$canvas_line.onmousedown=function (e) {

var startx=e.layerX;

var starty=e.layerY;

// moveTo(x,y) 开始绘制一条直线，指定线条的起点

canvas_2d_line.moveTo(startx,starty);

$canvas_line.onmousemove=function (e) {

var endx=e.layerX;

var endy=e.layerY;

// lineTo(x1,y1) 指定直线要到达的位置

canvas_2d_line.lineTo(endx,endy);

// stroke() 绘制路径

canvas_2d_line.stroke();

}

$canvas_line.onmouseup=function () {

$canvas_line.onmousemove=null;

$canvas_line.onmouseup=null;

}

}

/*

lineCap 设置或返回线条的结束端点样式

butt:向线条的每个末端添加平直的边缘 缺省

round:向线条的每个末端添加圆形线帽。

square:向线条的每个末端添加正方形线帽，效果不明显

lineJoin 设置或返回两条线相交时，所创建的拐角类型

miter:创建尖角; 缺省

bevel:创建斜角。

round:创建圆角。

lineWidth 设置或返回当前的线条宽度

number:当前线条的宽度，以像素计

miterLimit 设置或返回最大斜接长度

number:正数。规定最大斜接长度.5

斜接长度指的是在两条线交汇处内角和外角之间的距离

只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效

*/

canvas_2d_line.lineWidth=10;

canvas_2d_line.lineCap="round";

canvas_2d_line.moveTo(10,10);

canvas_2d_line.lineTo(150,10);

canvas_2d_line.stroke();

/*------------------two--------------分割线---------------thr--------------------*/

// beginPath()：开始一条路径，或重置当前的路径。

// closePath()：创建从当前点到开始点的路径，关闭当前的绘图路径

var canvas_radial=document.getElementById("canvas-radial");

var canvas_2d_radial=canvas_radial.getContext("2d");

// 绘制二次贝塞尔曲线 三部曲 quadraticCurveTo 前两个是贝塞尔左边，后两个是结束坐标

//canvas_2d_radial.moveTo(50,100);

//canvas_2d_radial.quadraticCurveTo(200,200,300,100);

//canvas_2d_radial.stroke();

canvas_radial.onmousedown=function (e) {

var startx=e.layerX;

var starty=e.layerY;

canvas_radial.onmouseup=function (e) {

var endx=e.layerX;

var endy=e.layerY;

canvas_radial.onmousemove=function (e) {

canvas_2d_radial.clearRect(0,0,400,400);

var conx=e.layerX;

var cony=e.layerY;

canvas_2d_radial.beginPath();

canvas_2d_radial.moveTo(startx,starty);

canvas_2d_radial.quadraticCurveTo(conx,cony,endx,endy);

canvas_2d_radial.stroke();

}

}

}

// arc(x坐标,y坐标,r半径,开始角度,结束角度,false逆时针/true顺时针);创建弧/曲线（用于创建圆或部分圆)

var canvas_2d_arc=canvas_radial.getContext("2d");

canvas_2d_arc.arc(100,100,30,0,Math.PI/2,false);

canvas_2d_arc.stroke();

/*------------------thr--------------分割线---------------four--------------------*/

var canvas=document.getElementById("canvas-is-path");

var canvas_2d_is_path=canvas.getContext("2d");

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

canvas_2d_is_path.stroke();

var angle=0;

canvas.onclick=function (e) {

var mx=e.layerX;

var my=e.layerY;

// isPointInPath(x,y) 返回 true，说明指定的点位于当前路径中,反之不在

if(canvas_2d_is_path.isPointInPath(mx,my)){

setInterval(function () {

// 清除画布 和 beginPath();连用

canvas_2d_is_path.clearRect(0,0,400,400);

angle+=0.2;

canvas_2d_is_path.beginPath();

canvas_2d_is_path.arc(200,200,50+10*Math.sin(angle),0,2*Math.PI);

canvas_2d_is_path.stroke();

},50);

}

}

});

/script

/head

body

section class="one"

hgroup

h2canvas 教程/h2

h3画矩形/h3

/hgroup

canvas width="400" height="400" id="canvas-test"

您需要更新浏览器呢 凸^-^凸

/canvas

/section

section class="two"

hgroup

h2canvas 教程 a href="";/a/h2

h3点击开始画线 / 路径(线条)修饰/h3

/hgroup

canvas width="400" height="400" id="canvas-line"

您需要更新浏览器呢 凸^-^凸

/canvas

/section

section class="thr"

hgroup

h2canvas 教程/h2

h3绘制二次贝塞尔曲线(点击鼠标滑动) / 绘制弧线/h3

/hgroup

canvas width="400" height="400" id="canvas-radial"

您需要更新浏览器呢 凸^-^凸

/canvas

/section

section class="four"

hgroup

h2canvas 教程/h2

h3脉动 （点击圆内）/h3

/hgroup

canvas width="400" height="400" id="canvas-is-path"

您需要更新浏览器呢 凸^-^凸

/canvas

/section

/body

/html

html5 canvas怎么画出斜向的椭圆

HTML5中的Canvas并没有直接提供绘制椭圆的方法，下面是对几种绘制方法的总结。各种方法各有优缺，视情况选用。各方法的参数相同：

context为Canvas的2D绘图环境对象，

x为椭圆中心横坐标，

y为椭圆中心纵坐标，

毁铅野a为椭圆横半轴长，

b为椭圆纵半轴长。

参数方程法

该方法利用椭圆的参数方程来绘制椭圆

//-----------用参数方程绘制椭圆---------------------

//函数的参数x,y为椭圆中心;a,b分别为椭圆横半轴、

//纵半轴长度，不可同时为0

//该方法的缺点是，当linWidth较宽，椭圆较扁时

//椭圆内部长轴端较为尖锐，不平滑，效率较低

function ParamEllipse(context, x, y, a, b)

{

//max是等于1除以长轴值a和b中的较大者

//i每次循环增加1/max，表示度数的增加

//激橘这样可以使得每次循环所绘制的路径(弧线)接近1像素

var step = (a b) ? 1 / a : 1 / b;

context.beginPath();

context.moveTo(x + a, y); //从椭圆的左端点开始绘制

for (var i = 0; i 2 * Math.PI; i += step)

{

//参数方程为x = a * cos(i), y = b * sin(i)，

//参数为i，表示度数(弧度)

context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));

}

context.closePath();

context.stroke();

};

复制代码纤喊

均匀压缩法

这种方法利用了数学中的均匀压缩原理将圆进行均匀压缩为椭圆，理论上为能够得到标准的椭圆.

//------------均匀压缩法绘制椭圆--------------------

//其方法是用arc方法绘制圆，结合scale进行

//横轴或纵轴方向缩放(均匀压缩)

//这种方法绘制的椭圆的边离长轴端越近越粗，长轴端点的线宽是正常值

//边离短轴越近、椭圆越扁越细，甚至产生间断，这是scale导致的结果

//这种缺点某些时候是优点，比如在表现环的立体效果(行星光环)时

//对于参数a或b为0的情况，这种方法不适用

function EvenCompEllipse(context, x, y, a, b)

{

context.save();

//选择a、b中的较大者作为arc方法的半径参数

var r = (a b) ? a : b;

var ratioX = a / r; //横轴缩放比率

var ratioY = b / r; //纵轴缩放比率

context.scale(ratioX, ratioY); //进行缩放(均匀压缩)

context.beginPath();

//从椭圆的左端点开始逆时针绘制

context.moveTo((x + a) / ratioX, y / ratioY);

context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI);

context.closePath();

context.stroke();

context.restore();

};

复制代码

下面的代码会出现线宽不一致的问题，解决办法：

均匀压缩法中把

context.stroke();context.restore();

改为

context.restore();context.stroke();

就可以

三次贝塞尔曲线法一

三次贝塞尔曲线绘制椭圆在实际绘制时是一种近似，在理论上也是一种近似。 但因为其效率较高，在计算机矢量图形学中，常用于绘制椭圆，但是具体的理论我不是很清楚。 近似程度在于两个控制点位置的选取。这种方法的控制点位置是我自己试验得出，精度还可以.

关于html5贝塞尔曲线和css贝塞尔曲线的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。