html canvas 简单体验
2016-03-31 17:34
465 查看
绘制直线
var canvas = document.getElementById('c1');var context = canvas.getContext('2d');
// context.moveTo(10 ,50); //起点
// context.lineTo(1000,50); //终点
// context.lineWidth = 20; //线宽
// context.strokeStyle='#cd3828'; //颜色
// context.strokeStyle= "rgb(205,40,40)";
// context.lineCap = 'round'; //线头是圆形 round
// context.stroke(); //开始绘制
// // 绘制第二条线
// context.beginPath();
// context.moveTo(20,120);
// context.lineTo(200,120);
// context.strokeStyle='#eecddd';
// context.lineCap = 'butt';
// context.stroke();
// 绘制第三条
// context.beginPath();
// context.moveTo(120,210);
// context.lineTo(500,210);
// context.lineWidth=20;
// context.strokeStyle='#defeed';
// context.lineCap='square';
// context.stroke();
//绘制三角形
context.moveTo(250 ,50);
context.lineTo(50,250);
context.lineTo(450,250);
context.lineTo(250,50);
context.lineWidth = 10;
context.strokeStyle='blue';
context.lineJoin='round'; //边的衔接形状 round / bevel / mitre
context.stroke();
// 填充三角形
context.closePath();
context.fillStyle='red';
context.fill();
// 绘制矩形
// strokeRect(0,10,100,200);
// fillRect(0,10,100,200);
绘制曲线
var canvas = document.getElementById('c1');var context = canvas.getContext('2d');
// 绘制圆弧
context.moveTo(62,24);
var control1_x = 187;
var control1_y = 32;
var control2_x = 429;
var control2_y = 480;
var endPointX = 365;
var endPointY = 133;
//绘制曲线
context.bezierCurveTo(control1_x , control1_y ,control2_x , control2_y , endPointX , endPointY);
context.stroke();
绘制正方形
var canvas = document.getElementById('c1');var context = canvas.getContext('2d');
// 实现原点图形旋转
context.translate(100 ,100);
//绘制10个正方形
var copies =10 ;
for(var i=1; i < copies ; i++){
context.rotate(2*Math.PI * 1 / (copies - 1));
context.rect(0,0,60,60);
}
context.stroke();
颜色填充
var canvas = document.getElementById('c1');var context = canvas.getContext('2d');
// 通明度的实现
context.fillStyle = "rgb(100,150,185)";
context.lineWidth = 10;
context.strokeStyle = "red";
//绘制圆形
context.arc(110 ,120 ,100 ,0 ,2*Math.PI);
context.fill();
context.stroke();
//绘制三角形
context.beginPath();
context.fillStyle = "rgba(100,150,185,0.5)";
context.moveTo(215,50);
context.lineTo(15,250);
context.lineTo(315,250);
context.closePath();
context.fill();
context.stroke();
相关文章推荐
- HTML学习笔记(六)列表
- xhtml与html的区别
- htm、html、shtml区别
- [Web开发] 在HTML代码里面如何判断IE版本
- 【原创】C# 多线程采集工具(使用 HtmlAgilityPack 工具)
- C#+HtmlAgilityPack+XPath带你采集数据(以采集天气数据为例子)
- 删除字符串中所有html标签,保留标签内容
- mac下怎么添加HTMLTestRunner模文件
- HTML常用标签
- html信息提示框
- html meta标签
- ckeditor html标签的class 等attribute属性都被屏蔽啦,替换成空的解决方案
- 对比HTML和XML
- div内元素是否在可见区域的判断与控制
- HTML实体符号代码速查表
- HTML九宫格布局实现方法
- html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
- html调用XML
- HTML学习(四)——图像
- html的form中动态添加action