Canvas路径、描边、填充
- <script>
- var context = document.getElementById('canvas').getContext('2d');
- context.font = '48pt Helvetica';
- context.strokeStyle = 'blue';//边框颜色
- context.fillStyle = 'red';//填充颜色
- context.lineWidth = '2';
- //画文字
- context.strokeText('边框', 60, 110);
- context.fillText('填充', 440, 110);
- context.strokeText('边框和填充', 650, 110);
- context.fillText('边框和填充', 650, 110);
- //画矩形
- context.lineWidth = '5';
- context.beginPath();//边框 矩形
- context.rect(80, 150, 150, 100);
- context.stroke();
- context.beginPath();//填充 矩形
- context.rect(400, 150, 150, 100);
- context.fill();
- context.beginPath();//边框和填充
- context.rect(750, 150, 150, 100);
- context.stroke();
- context.fill();
- //画弧度
- context.beginPath();
- context.arc(150, 370, 60, 0, 1.5 * Math.PI);
- context.stroke();
- context.beginPath();
- context.arc(475, 370, 60, 0, Math.PI * 3 / 2);
- context.fill();
- context.beginPath();
- context.arc(820, 370, 60, 0, Math.PI * 3 / 2);
- context.stroke();
- context.fill();
- //closePath()方法创建当前点到起始点的路径
- context.beginPath();
- context.arc(150, 550, 60, 0, Math.PI * 3 / 2);
- context.closePath();
- context.stroke();
- context.beginPath();
- context.arc(475, 550, 60, 0, Math.PI * 3 / 2);
- context.closePath();
- context.fill();
- context.beginPath();
- context.arc(820, 550, 60, 0, Math.PI * 3 / 2);
- context.closePath();
- context.stroke();
- context.fill();
- //绘制三角形
- context.beginPath();
- context.moveTo(120, 650);
- context.lineTo(120, 750);
- context.lineTo(180, 750);
- context.closePath();
- context.stroke();
- context.beginPath();
- context.moveTo(450, 650);
- context.lineTo(450, 750);
- context.lineTo(510, 750);
- context.closePath();
- context.fill();
- context.beginPath();
- context.moveTo(810, 650);
- context.lineTo(810, 750);
- context.lineTo(870, 750);
- context.closePath();
- context.fill();
- context.stroke();
- context.beginPath();
- context.moveTo(120, 800);
- context.lineTo(120, 900);
- context.lineTo(180, 900);
- context.stroke();
- context.beginPath();
- context.moveTo(450, 800);
- context.lineTo(450, 900);
- context.lineTo(510, 900);
- context.fill();
- context.beginPath();
- context.moveTo(810, 800);
- context.lineTo(810, 900);
- context.lineTo(870, 900);
- context.fill();
- context.stroke();
- </script>
Canvas路径、描边、填充的更多相关文章
- Canvas绘图中的路径描边与填充
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...
- 理解canvas路径
canvas路径和ps里面的路径差不多,在进行图形绘制时,先绘制出来图形的路径,然后再描边或者填充. canvas路径还有子路径的概念,在某一时刻,canvas之中只能有一条路径存在,Canvas规范 ...
- 纯CSS实现帅气的SVG路径描边动画效果(转载)
本文转载自: 纯CSS实现帅气的SVG路径描边动画效果
- Canvas路径方向
使用Canvas路径画图需要注意方向,画图方向是顺时针还是逆时针需要记住.下面让我们看看Canvas常见路径方向. arc 参数值 context.arc(x,y,r,sAngle,eAngle,co ...
- html5 canvas用图案填充形状
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- canvas放射性渐变填充
今天在学习canvas时,遇到canvas的fillstyle有一个createRadialGradient()方法,创建放射性渐变. 上代码: <!DOCTYPE html> <h ...
- html5 canvas 弧形描边渐变
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html5 canvas 多个填充渐变形状
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- canvas路径绘制
惯例,先贴代码: 1 /** 2 * Created by Administrator on 2016/1/27. 3 */ 4 function draw (id){ 5 var canvas = ...
随机推荐
- OS X 键盘快捷键
了解有关常见 OS X 键盘快捷键的信息.键盘快捷键是通过按下键盘上的组合键来调用 OS X 功能的一种方式. 若要使用键盘快捷键或按键组合,您可以同时按修饰键和字符键.例如,同时按下 Command ...
- InputStream和OutputStream
1.在java中stream代表一种数据流(源),javaio的底层数据元,---(想像成水龙头) 2.任何有能力产生数据流(源)的javaio对象就可以看作是一个InputStream对象既然它能产 ...
- Linux学习笔记3-VI 和 VIM的使用
vi: Visual Interface vim: VI iMproved 全屏编辑器, Linux系统下最强大的两款编辑器,vi和vim,vi是Linux本身自带的一款编辑器,纯文本编辑不带任何效果 ...
- AndroidUI 视图动画-混合动画效果 (AnimationSet)/动画效果监听
在前面介绍了几种动画效果:透明动画效果(AlphsAnimation).移动动画效果(TranslateAnimation).旋转动画效果(RotateAnimation).缩放动画效果(ScaleA ...
- Little Zu Chongzhi's Triangles
Little Zu Chongzhi's Triangles Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 512000/512000 ...
- Exception Handling in ASP.NET Web API
public static void RegisterGlobalFilters(GlobalFilterCollection filters) { filters.Add(new HandleErr ...
- 关于在用Swift开发iOS时如何隐藏NavigationBar和TabBar
举个例子:如果我有一个页面需要进入时同时隐藏NavigationBar和TabBar,那么我就在那个页面的ViewController的代码里加上下面的代码.就可以实现了.接下来告诉大家每一块要注意的 ...
- 利用js_API 运行对html文档元素的属性的CRUD操作
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- C++关注备注部分知识点
//关注备注部分知识点. #include <iostream> #include <string><span style="white-space:pre&q ...
- 在eclipse中怎么安装插件
1.方法1是help中安装新软件,这个一般要你真到软件的url,如果不知道呢?那么就要用到marketpalce,这个一般也在help中的,