HTML5自学笔记[ 14 ]canvas绘图基础2
canvas绘制路径不仅可以绘制直线和多边形,还提供了绘制曲线的方法,利用这些方法可以画出多种曲线效果。
方法1:arc(x,y,r,起始弧度,结束弧度,绘制方向);其中(x,y)为圆心坐标,r为半径,弧度计算公式:deg*Math.PI/180,绘制方向默认为false表示顺时针绘制 ,设置为true时,逆时针绘制。
例1,顺时针绘制0-90°圆弧:
oContext.beginPath(); oContext.arc(300,300,200,0,90*Math.PI/180,false); oContext.stroke();
效果图:
例2,逆时针绘制0-90°圆弧:
oContext.beginPath(); oContext.arc(300,300,200,0,90*Math.PI/180,true); oContext.stroke();
效果图:
方法2:arcTo(x1,y1,x2,y2,r),(x1,y1)为第一组坐标,(x2,y2)为第二组坐标,r为半径;原理图如下:
方法3:只有一组控制点的贝塞尔曲线,quadraticCurveTo(x1,y1,x2,y2),(x1,y1)是第一组控制点,(x2,y2)是第二组结束坐标;
方法4:有两组控制点的贝塞尔曲线,bezierCurveTo(x1,y2,x2,y2,x3,y3),前两个为控制点,后一个为结束点;贝塞尔曲线原理复杂就不画图了~科科
HTML5自学笔记[ 14 ]canvas绘图基础2的更多相关文章
- HTML5自学笔记[ 11 ]canvas绘图基础1
html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支 ...
- HTML5自学笔记[ 17 ]canvas绘图基础4
绘制图像: drawImage(oImg,x,y),oImg是一个Image对象,(x,y)为绘制起点,绘制的图像大小和源图大小一样. drawImage(oImg,x,y,w,h),后两个参数设置绘 ...
- HTML5自学笔记[ 16 ]canvas绘图基础3
canvas还提供提供了一些动态方法,使图像可以旋转.缩放和移动,与css3中的方法一样. 移动:translate(x,y),x和y为横竖方向的偏移量 旋转:rotate(弧度),弧度=角度*Mat ...
- HTML5自学笔记[ 23 ]canvas绘图基础7
变换矩阵: transform(a,b,c,d,e,f),多次使用该函数,效果是多次状态改变的累加: setTransform(a,b,c,d,e,f),会忽略之前的变换,从起始状态开始改变.
- HTML5自学笔记[ 15 ]canvas绘图基础6
关于线条的一些属性: lineCap,这个属性表示的是线条两端的样式,值有butt(默认)/round/square. lineJoin,这个属性表示线条相交的方式,值有miter(默认)/bevel ...
- HTML5自学笔记[ 18 ]canvas绘图基础5
获取图像数据:getImgData(x,y,w,h),返回的是一个ImageData对象,这个对象有三个属性保存图像信息:width/height/data.data是一个数组,保存了每个像素的信息, ...
- HTML5自学笔记[ 15 ]canvas绘图实例之钟表
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5自学笔记[ 13 ]canvas绘图小实例之方块移动
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5自学笔记[ 12 ]canvas绘图小示例之鼠标画线
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- (1)建立一个名叫Cat的类: 属性:姓名、毛色、年龄 行为:显示姓名、喊叫 (2)编写主类: 创建一个对象猫,姓名为“妮妮”,毛色为“灰色”,年龄为2岁,在屏幕上输 出该对象的毛色和年龄,让该对象调用显示姓名和喊叫两个方法。
package lianxi; public class Cat { String Name, Color; int Age; void getName() { System.out.println( ...
- 【leetcode❤python】24. Swap Nodes in Pairs
#-*- coding: UTF-8 -*- # Definition for singly-linked list.# class ListNode(object):# def __init ...
- DirectX 3d 取景变换
在世界坐标系中,几何体和摄像机都是相对于世界坐标系定义的.但是当摄像机的位置和朝向任意时,投影变换及其它类型的变的就略显困难或效率不高.为了简化运算,我们将摄像机变的至世界坐标系原点,并将其旋转,使摄 ...
- CSS3教程链接
下面列出本站关于CSS3的相关链接,以方便大家阅读: 第一节:<CSS3 Gradient> 第二节:<CSS3 RGBA> 第三节:<CSS3 Border-radiu ...
- android测试参考,及CreateProcess failure, error问题解决
今天小伙伴问我问题,我给了这2个小命令,或许做android测试的同学可以用得着. 截图命令adb shell /system/bin/screencap -p /sdcard/screenshot. ...
- git学习笔记10-新开发的功能不想要了-强行删除分支
添加一个新功能时,你肯定不希望因为一些实验性质的代码,把主分支搞乱了,所以,每添加一个新功能,最好新建一个feature分支,在上面开发,完成后,合并,最后,删除该feature分支. 现在,你终于接 ...
- Andoid java文件中的Log检查工具
AndroidLogChecker 由于发布软件版本的时候我们需要把Log注释掉,此工具可以检查java类中的Log所在行以及是否已经注释. Github: https://github.com/cu ...
- [转载] tcp那些事2
原文: http://coolshell.cn/articles/11609.html 这篇文章是下篇,所以如果你对TCP不熟悉的话,还请你先看看上篇<TCP的那些事儿(上)> 上篇中,我 ...
- html块级元素和内联元素小结
Block element 块级元素 顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用的<div>.<p>.<ul>默认状态下都是属于块级元素.块级 ...
- Java中的Swing键盘绑定案例
package ch12; import javax.swing.*; import java.awt.*; import java.awt.event.*; /** * Created by Jiq ...