canvas绘制二次贝塞尔曲线、三次贝塞尔曲线、画爱心_绘制三次bezier曲线-程序员宅基地

技术标签: canvas  

方法说明

quadraticCurveTo(cp1x, cp1y, x, y)
绘制二次贝塞尔曲线,cp1x,cp1y为一个控制点,x,y为结束点。


bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
绘制三次贝塞尔曲线,cp1x,cp1y为控制点一,cp2x,cp2y为控制点二,x,y为结束点。

 

画一个二次贝塞尔曲线

	window.onload=function(){
		var canvas = document.getElementById('canvas');
		canvas.width='300';
		canvas.height='300';
		var ctx = canvas.getContext('2d');
	    ctx.beginPath();
    	ctx.moveTo(100, 200);
		ctx.quadraticCurveTo(100, 100, 230, 200);
		ctx.stroke();
	}

画一个三次贝塞尔曲线


	window.onload=function(){
		var canvas = document.getElementById('canvas');
		canvas.width='300';
		canvas.height='300';
		var ctx = canvas.getContext('2d');
	    ctx.beginPath();
    	ctx.moveTo(50, 200);
		ctx.bezierCurveTo(100, 100,150,150, 230, 200);
		ctx.stroke();
	}

画一个爱心

	
	window.onload=function(){
		var canvas = document.getElementById('canvas');
		canvas.width='300';
		canvas.height='300';
		var ctx = canvas.getContext('2d');
	    ctx.beginPath();
    	ctx.moveTo(150, 100);
		ctx.bezierCurveTo(50,50,50,150, 150, 200);
		ctx.moveTo(150, 100);
		ctx.bezierCurveTo(250, 50,250,150, 150, 200);
		ctx.fill();
	}
	

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/dkm123456/article/details/112621042

智能推荐

操作系统课程项目 OS project —— Pintos from Project 1 to Project 3_斯坦福操作系统 project3-程序员宅基地

文章浏览阅读7.7k次,点赞14次,收藏83次。Pintos Project 陪伴我们操作系统课程大半个学期了……虽然做了这么长时间,个人能力有限,pintos代码,看过的可能也就看懂了一半吧,更不用说没看过的了……但是也找到了一些有价值的资料,整理一下,供后辈们参考……关于环境的问题,最好是用ubuntu 16.04windows用户不要折腾装双系统了,特别是win10,动不动更新一下,说不定双系统就出问题了,linux..._斯坦福操作系统 project3

BDP FL NHS ester,BDP FL NHS标记蛋白质和肽的氨基活性染料_肽段染料-程序员宅基地

文章浏览阅读185次。BDPFLNHSester是一种用于488 nm通道的高级染料,是荧光素的替代品,荧光素是一种与BDPFLNHSester相同的分子。标记蛋白质和肽的氨基活性染料。虽然这种分子的吸收光谱和发射光谱保持在FAM激发和发射通道内,但这种染料提供了更好的光稳定性和出色的亮度。BODIPY-FL的荧光光谱比FAM的荧光光谱窄。当发射波长可以调谐到染料值时,这为基于单色仪的仪器提供了更好的亮度。该染料是中性的,具有低分子量,并且在共轭物中保持高量子产率。该染料是荧光素(FAM)、BODIPY-FL..._肽段染料

关于Dosbox0.74无法使用masm命令-程序员宅基地

文章浏览阅读6k次,点赞9次,收藏9次。今天尝试在dosbox里编译asm源代码文件但是提示“illegal command”,也就是非法命令开始还以为我的dosbox版本不对但是去网上查阅资料发现别人用这个版本都可以使用所以百思不得其解最后,突然发现别人文件夹中的exe程序和我的有点儿不一样看了下我的asm目录下发现自己有一个tool.rar没有解压打开看了一下,里面是masm.exe和lin..._illegal command masm

详解springBoot集成activiti7,使用actiBPM绘制流程图(二)_springboot bpmn-程序员宅基地

文章浏览阅读8k次。快速使用IDEA搭建SpringBoot项目,集成Activiti7(一)详解springBoot集成activiti7,工作流实战案例(三)1.IDEA安装actiBPM插件搜索actiBPM,然后insatlled就可以了,本文已安装,不做演示。2. 在resources下建立文件夹processes,目录结构如下:3.在processes下新..._springboot bpmn

JAVA+MYSQL可视化学生信息管理系统_学生信息管理系统mysql可视化-程序员宅基地

文章浏览阅读907次,点赞3次,收藏9次。java+mysql小程序_学生信息管理系统mysql可视化

android apkplug-程序员宅基地

文章浏览阅读161次。ApkPlug ApkPlug是一款Android系统下的模块化解决方案,可以帮助开发者以模块化方式开发和改造应用,ApkPlug为开发者从“云”和”端”两个方向提供API。ApkPlug可以帮开发者减少APK应用代码,缩小APK应用体积。ApkPlug同时支撑动态加载、应用内进行更新升级,支持第三方插件接入,为开发者开发APP减少人力和时间成本。 点豆科技自..._android apk plugin

随便推点

SortedList用法_sortedlist. where. take 反向取值-程序员宅基地

文章浏览阅读637次。//SortedListusing System;using System.Collections.Generic;using System.Text;using System.Collections;namespace ConsoleApplication1{ class Program { public static void Main()_sortedlist. where. take 反向取值

解析社交电商运营模式玩法的秘密?_总结会员制社交电商的运作模式对平台、对企业、分别有什么好处-程序员宅基地

文章浏览阅读208次。背景:从18年开始很多互联网大咖都在积极的宣传社交电商,谈及社交电商就衍生出很多名词:新零售、社群经济、内容电商、移动电商、垂直电商、分享经济、微商营销、O2O、智慧零售、自媒体营销、产业互联网等等。小胡带领大家回到18年从头开始分析一下:1、头部电商都在烧钱抢流量,也造成了电商网站站内本身的流量越来越贵了,大家之前做一个seo优化,或者cpc等等,都是几毛钱的,后面也是越来越贵,涨到了5-10元。推广费用的增加导致了产品本身的利润也减少了,东西越来越贵,想赚钱就越来越难,于是就有企业通过站..._总结会员制社交电商的运作模式对平台、对企业、分别有什么好处

极客大学产品经理训练营 极客时间购买课程-大作业_极客时间b端产品经理入门课-程序员宅基地

文章浏览阅读3.6k次。1. 标题作者修改历史标题:【极客时间】购买课程作者历史时间易筋创建2021-01-09易筋添加购买流程图62021-03-02易筋添加购买时序图72021-03-162. 简要描述极客时间 App, 为用户提供购买课程功能。购买的主要渠道有极客时间 App内购买,微信购买,购买返现等。3. 利益相关者 / 涉众 / 参与人及其相关利益4. 事件流:进本流程 / 扩展流程 / 异常流程基础流程用例开始浏览课程、搜索课程点击购买支付_极客时间b端产品经理入门课

11-Flutter移动电商实战-首页_屏幕适配方案和制作-程序员宅基地

文章浏览阅读767次。11-Flutter移动电商实战-首页_屏幕适配方案和制作1、flutter_ScreenUtil插件简介flutter_ScreenUtil屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局。插件会让你先设置一个UI稿的尺寸,他会根据这个尺寸,根据不同屏幕进行缩放,能满足大部分屏幕场景。github:https://github.com/OpenFlutter/flut..._flutter使用flutter_screenutil计算后差了一点点

LOG的含义 : Mysql 之 binlog介绍_mysql binlog at 44233什么意思-程序员宅基地

文章浏览阅读1.4k次。1、什么是binlog binlog是一个二进制格式的文件,用于记录用户对数据库更新的SQL语句信息,例如更改数据库表和更改内容的SQL语句都会记录到binlog里,但是对库表等内容的查询不会记录。 默认情况下,binlog日志是二进制格式的,不能使用查看文本工具的命令(比如,cat,vi等)查看,而使用mysqlbinlog解析查看。2.binlog的作用 ..._mysql binlog at 44233什么意思

【IO流】java Io流写图片时失真(远程文件)_java io写图片-程序员宅基地

文章浏览阅读1.3k次,点赞2次,收藏3次。问题描述在测试功能的时候发现远程图片下载到本地的时候图片严重失真,在往上找的解决方案也都不适用,比如用BufferedOutputStream字节数组输出等等。在后来的排查过程中发现,在下图位置打debug进行断点拍查,输出的文件就完全没有任何问题解决方法在进行输出的时候,多加两个参数。完整代码 String uploadPath = sysSetting.getUploadPat..._java io写图片

推荐文章

热门文章

相关标签