<html>

<head>AS</head>

<script>

	var cvs;

	var context;

	//context.fill();//填充

    //context.stroke();//绘制边框

	//context.fillStyle = "#FF0000";

	//context.fillRect(20,20,200,200); 

	function DrawBezier(p0,p1,p2)

	{

		context.strokeStyle = "#000000";

		context.beginPath();

		for(var i = 0;i < 1;i += 0.001)

		{

			var x0 = (1 - i) * (1-i) * p0.x;

			var y0 = (1 - i) * (1-i) * p0.y;

			var x1 = (1 - i) * 2*i * p1.x;

			var y1 = (1 - i) * 2*i* p1.y;

			var x2 = i * i * p2.x;

			var y2 = i * i * p2.y;

			if(i == 0)

				context.moveTo(x0+x1+x2,y0+y1+y2);

			else

				context.lineTo(x0+x1+x2,y0+y1+y2);

		}

		//context.closePath();

		context.stroke();

	}

	// p1,p2为控制点

	function DrawBezier3(p0,p1,p2,p3)

	{

		context.strokeStyle = "#000000";

		context.beginPath();

		for(var i = 0;i < 1;i += 0.001)

		{

			var a = 1 - i;

			var x0 = a * a * a * p0.x;

			var y0 = a * a * a * p0.y;

			var x1 = 3 * i * i * a * p1.x;

			var y1 = 3 * i * i * a * p1.y;

			var x2 = 3 * i * a * a  * p2.x;

			var y2 = 3 * i * a * a  * p2.y;

			var x3 = i * i * i * p3.x;

			var y3 = i * i * i * p3.y;

			var x = x0 + x1 + x2 + x3;

			var y = y0 + y1 + y2 + y3;

			if(i == 0)

				context.moveTo(x,y);

			else

				context.lineTo(x,y);

		}

		//context.closePath();

		context.stroke();

	}

	function DrawPoint(x,y,rad)

	{

		context.fillStyle = "#FF0000";

		context.beginPath();

		//ctx.arc(开始原点x，开始原点y，半径，起始弧度，终止弧度，true表示逆时针动画)

		context.arc(x, y, rad, rad, Math.PI * 2, true);

		context.closePath();

		context.stroke();

		context.fill();

	}

	function DrawP(p)

	{

		DrawPoint(p.x,p.y,5);

	}

	var pA = {"x":20,"y":280};

	var pB = {"x":120,"y":280};

	var pC = {"x":220,"y":20};

	var pD = {"x":120,"y":20};

	window.onload = function()

	{

		cvs = document.getElementById("cvs");

		context = cvs.getContext("2d");

		context.lineWidth="1";

		context.strokeStyle = "#00000";

		DrawBezier(pA,pB,pC);

		DrawBezier3(pA,pB,pD,pC);

		DrawP(pA);

		//DrawP(pB);

		DrawP(pC);

		//DrawP(pD);

	};

	var id = 0;

	function onChange(v)

	{

		id = v;

	}

	function onClick(v)

	{

		var x = document.getElementById("x").value;

		var y = document.getElementById("y").value;

		console.log(x+","+y);

		if(id == "0")

		{

			pA.x = parseInt(x);

			pA.y = parseInt(y);

		}else if(id == "1")

		{

			pB.x = parseInt(x);

			pB.y = parseInt(y);

		}else if(id == "2")

		{

			pC.x = parseInt(x);

			pC.y = parseInt(y);

		}else if(id == "3")

		{

			pD.x = parseInt(x);

			pD.y = parseInt(y);

		}

		//cvs.height = height;

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

		DrawBezier(pA,pB,pC);

		DrawBezier3(pA,pB,pD,pC);

		DrawP(pA);

		DrawP(pB);

		DrawP(pC);

		DrawP(pD);

	}

</script>

<body>

	<div>

		<input type="text" id="id" onchange="onChange(this.value)">

		<input type="text" id="x" onchange="">

		<input type="text" id="y" onchange="">

		<button onclick="onClick()">click</button>

	</div>

	<canvas id="cvs" width="800px" height="800px"></canvas>

</body>

</html>

<script>

</script>

　　

Beizer。。。。。的更多相关文章

  1. 查询oracle数据库，返回的数据是乱码。 PL/SQL正常。

    查询oracle数据库,返回的数据是乱码. PL/SQL正常. 解决方案如下:

  2. vmware workstation 上创建的centos 7.2 ，新添加一块网卡。无法找到配置文件。

    在vmware workstation 11上,新建一个centos 7.2系统. 初装带有一个块网卡:能够在/etc/sysconfig/network-scripts/目录下找到相应的网卡配置文件 ...

  3. 分配给 主机的 Evaluation Mode 许可证已过期。建议升级许可证。

    参考文献 http://247its.wordpress.com/2012/04/02/new-build-esxi-5-complaints-licence-has-expired/ http:// ...

  4. 解决ftp连接出现 无法从控制 Socket 读取。Socket 错误 = #10054。

    ftp连接会显示以下错误信息 无法从控制 Socket 读取.Socket 错误 = #10054 或者是这样的信息 Opening data channel for directory list.T ...

  5. asp.net C# 未能加载文件或程序集或它的某一个依赖项。需要强名称程序集。的解决办法

    asp.net C# 未能加载文件或程序集或它的某一个依赖项.需要强名称程序集.的解决办法 出现这个错误是原因:是有签名的DLL引用了无签名的DLL 如上图所示,就是因为引用Entity.MVCEnt ...

  6. 存储区更新、插入或删除语句影响到了意外的行数(0)。实体在加载后可能被修改或删除。刷新 ObjectStateManager 项。

    在用asp.net MVC3 的MusicStore时候 Edit某个数据项时提示下面的错误: 存储区更新.插入或删除语句影响到了意外的行数(0).实体在加载后可能被修改或删除.刷新 ObjectSt ...

  7. (转)要“jquery”ScriptResourceMapping。请添加一个名为 jquery (区分大小写)的 ScriptResourceMapping。”的解决办法。

    要“jquery”ScriptResourceMapping.请添加一个名为 jquery (区分大小写)的 ScriptResourceMapping.”的解决办法. 1.先将aspnet.scri ...

  8. web系列教程之php 与mysql 动态网站 。检索 与更新。

    接着上次WEb 系列开发之php 与mysql动态网站入门. 个人觉得,学习技术就像一棵大树,主干很重要,枝叶其次.对于学习技术,我们应该分清主次关系.怎么学?为什么要学?有一个较好的分寸. 有时候觉 ...

  9. 保存项目文件“XXX.csprj”时出错。类没有注册。

    [出错提示]保存项目文件“XXX”时出错.类没有注册.正在查找具有CLSID的对象:{D9B3211D-E57F-4426-AAEF-30A806ADD397}. [解决办法] 需要安装:MSXML_ ...

  10. 2. SharePoint Online 开发，请联系qq512800530。加好备注。（不要发站内信。。。）

    ///(不要发站内信...) <meta name="keywords" content="SharePoint Online, SP Online, SPO, S ...

随机推荐

  1. ASP.NET Core SignalR .NET 客户端

    项目 2022/11/29 13 个参与者 反馈 通过 ASP.NET Core SignalR .NET 客户端库可以从 .NET 应用与 SignalR 中心进行通信. 查看或下载示例代码(如何下 ...

  2. 微信iOS消息拦截插件教程－手机越狱环境搭建

    微信iOS消息拦截插件教程-手机越狱环境搭建 标签(空格分隔): ios越狱开发 环境 背景介绍 本教程所有内容免费 本教程来源于一次知识分享,如果有需要了解更多的 请联系QQ:480071411 i ...

  3. this,构造器,static,final,单例模式

    this关键字 在java中this是一个引用变量,即指向当前对象地址的引用(指针),→可以把this当作当前对象,便于更好的索引. this() 实际是调用了当前对象的构造器 1. 引用当前对象的属 ...

  4. 获取某一个数的2进制位数以及bitmask

    举例说明:比如32对应的2进制为2b'100000,对应的bitmask为2b'11111. 实现代码: #include <stdio.h> typedef unsigned char ...

  5. numpy基础--利用数组进行数据处理

    以下代码的前提:import numpy as np numpy数组可以将许多种数据处理任务表述为简洁的数组表达式,用数组表达式替换循环的做法,通常被称为矢量化. 官方说明文档:Array creat ...

  6. 记录工作中常用的 JS 数组相关操作

    工作中难免会遇到各种各样的数据结构,较为全面的了解数组操作,对于复杂数据结构的处理会非常有用且节省时间 所以想在这里总结一下工作中常用的数组操作,都是一些非常基础的知识,大家看个乐就好~ 目录 工作中 ...

  7. 大模型高效微调-LoRA原理详解和训练过程深入分析

    博客首发于我的知乎,详见:https://zhuanlan.zhihu.com/p/702629428 一.LoRA原理 LoRA(Low-Rank Adaptation of LLMs),即LLMs ...

  8. leetcode-3-无重复字符的最长子串-javascript

    题目 给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. 示例 1: 输入: "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc ...

  9. Java常用的十大开源工具类库总结

    以下是个人总结的Java常用的十大开源工具类库,根据具体需求和项目,可以选择合适的工具类库来提高开发效率.1. Apache Commons:Apache Commons是一个开源的工具类库,提供了大 ...

  10. Css实现浏览滚动条效果

    Css实现浏览滚动条效果 前言 也是有大半个月没有更新文章了,大部分时间都在玩,然后就是入职的事.今天就更新一个小知识,刷抖音的时候看到的,感觉还不错. 属性介绍 关键属性animation-time ...