html5高级程序设计(canvas笔记)
来源:互联网 发布:个体 crm 知乎 编辑:程序博客网 时间:2024/04/29 16:16
context.beginPath():开始绘制新图形,最大的用处是canvas需要据此来计算图形的内部和外部范围,以便完成后续的描边和填充。
context.moveTo(x,y):不绘制,只是将当前位置移动到新的目标坐标(x,y)。(提起画笔移动到新位置)
context.lineTo(x,y):不仅将当前位置移动到新的目标坐标(x,y),而且在两个坐标之间画一条直线。(用画笔从纸上的旧坐标画条直线到新坐标)
context.closePath():闭合路径
context.stroke():绘制路径
context.lineWidth = 5; 加宽线条
context.lineJoin = "round"; 平滑路径的接合点
context.strokeStyle = "red"; 将颜色改为红色
context.fillStyle = '#339900'; 设置填充颜色
context.fill(); 对背景进行填充
context.fillRect(x,y,宽,高) 对背景的填充范围
context.quadraticCurveTo(起点X,起点Y,终点X,终点Y) 绘画曲线
context.drawImage(oImg,x,y,宽,高) 对背景进行图片填充
context.arc(x,y,radius,startAngle,endAngle,anticlockwise); //.arc(圆点,圆点,半径大小,起始弧度,结束弧度,画圆的方向)
1.context.arc(200,160,40,0,Math.PI*2,false); 圆
2.context.arc(200,200,80,Math.PI/2,Math.PI*1.5,false);半圆
文字类:
context.fillStyle = "black";context.globalAlpha = '0.8';
context.textAlign = 'center';
context.font = '32px Arial';
context.shadowColor = "rgba(0,0,0,0.3)";
context.shadowOffsetX = 15;
context.shadowOffsetY = 10;
context.shadowBlur = 5;
context.fillText('Hellow Canvas111', 200 ,100)
context.restore();
bezierCurveTo绘制贝济埃曲线:(可以绘制任何形状的图形)
绘制方法context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
cp1x为第一个控制点的横坐标
cp1y为第一个控制点的纵坐标
cp2x为第二个控制点的横坐标
cs2y为第二个控制点的纵坐标
x为贝济埃曲线的终点横坐标
y为贝济埃曲线的终点纵坐标
- html5高级程序设计(canvas笔记)
- 【HTML5】HTML5 高级程序设计 学习笔记2 canvas
- HTML5高级程序设计:Canvas API
- Canvas——JavaScript高级程序设计笔记(12)
- js高级程序设计笔记10--canvas绘图
- HTML5程序设计 Canvas API
- 【HTML5】HTML5 高级程序设计 学习笔记Froms API
- canvas (笔记) 高级篇
- HTML5 Canvas实践(二)Canvas 高级功能
- HTML5 脚本编程——JavaScript高级程序设计笔记(13)
- js高级程序设计笔记11--HTML5脚本编程
- JavaScript高级程序设计(笔记)
- 【HTML5】HTML5 高级程序设计 学习笔记1 HTML5新特性简介
- JS高级程序设计读书笔记(第十五章 使用Canvas绘图)
- JavaScript高级程序设计第15章(使用Canvas)
- Html5系列(二十三) canvas高级贝塞尔曲线运动动画
- html5 canvas 学习笔记
- html5笔记2 canvas
- 我们如何对待我们的工作? 身在IC行业
- Sysbench性能测试工具遇到相关错误解决方案
- 数据库查询横表变竖表
- ANDROID NDK文档系列--(一)Android NDK Overview
- 邮件英语最常用的100个句型
- html5高级程序设计(canvas笔记)
- 程序员究竟该如何提高效率
- git clone简介
- Unity3D之人物头顶名称与血条更新与绘制
- SQL读取指定数据表中的所有字段说明
- MFC添加控件变量运行不了?
- 覆盖Thread类的run()方法使用线程
- VC、VS2005调试技巧
- visual 2005 C++在编写控制台应用程序运行后会自动退出,如何不自动退出