html canvas 简单体验
绘制直线
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();
转载于:https://www.cnblogs.com/zeopean/p/canvas.html
html canvas 简单体验相关推荐
- 用html5做一个简单的作品,html5 canvas 简单画板实现代码
canvas简单画板 canvas简单画板 提示:您可以先修改部分代码再运行
- html5画板功能,JS实现canvas简单小画板功能
本文实例为大家分享了JS实现canvas简单小画板的具体代码,供大家参考,具体内容如下 Html部分: Document CSS部分: *{ margin: 0; padding: 0; list-s ...
- canvas简单五子棋
canvas简单五子棋 效果 思路 代码 效果 思路 canvans 绘制棋盘,绘制时候边缘预留棋子位置 监听点击事件绘制落子并记录到字典中 获胜判定,在四个方向上检测是否有足够数量的连贯棋子 代码 ...
- html5 canvas 画板 demo,html5 canvas 简单画板实现代码
canvas简单画板 #can{ width:600px; height:500px; border:1px solid #ccc; margin-top:0px; margin-left:20px; ...
- 微信小程序canvas简单使用
微信小程序canvas简单使用 index.wxml文件 index.js文件 效果图 index.wxml文件 <canvas type="2d" id="can ...
- Tez的web UI简单体验
Tez的web UI简单体验 前言 由于CDP7默认是Hive On Tez,不再有Map Reduce和Spark什么事,查看监控.分析数据倾斜等原因导致的HQL任务跑不快的问题没有使用Spark那 ...
- Notepad-- Windows版本安装、简单体验
Notepad-- Windows版本安装.简单体验 简介 下载 安装 简单体验 简介 之前在大学的时候就听我们老师说Nodepad++的作者的一些言论,当时直接卸载了就一直没用.后来找了好多网上其他 ...
- 旧android 4 平板,小米平板4是否值得买?简单体验后我退货了
小米平板4是否值得买?简单体验后我退货了 2018-07-14 17:55:21 11点赞 2收藏 5评论 小米平板4(以下简称米板4)虽然悄然上市,但依旧吸引了不少围观群众的目光,这部看似放大版红米 ...
- 简单体验K8S的Saas服务-青云KubeSphereCloud轻量集群服务
简单体验K8S的Saas服务-青云KubeSphereCloud轻量集群服务 背景 之前有写过几篇KubeSphere的使用笔记: 使用kubekey的all-in-one安装K8S1.24及Kube ...
- Android Canvas简单使用
转载请注明出处王亟亟的大牛之路 Android中使用图形处理引擎,2D部分是android SDK内部自己提供,3D部分是用Open GL ES 1.0. 今天写的是关于2D图像的一些简单使用. 图形 ...
最新文章
- go语言学习-iota
- python电脑配置要求cpu-python指定cpu使用率,与内存占用率
- java一个接口执行结束释放内存_java的灵魂--JVM虚拟机
- Knockout学习笔记之二($root,$parent及$data的区别)
- Python使用openpyxl模块读写excel文件
- 花呗:已有5700万人正在使用花呗账单助手功能
- leetcode题解172-阶乘后的零
- python爬虫技术总结_python爬虫知识点总结(二)爬虫的基本原理
- MatLab 2016b下载资源
- 在MySQL中设计新闻网站_基于MySQL新闻搜索引擎的设计与实现
- Cesium结合kriging.js制作降雨等值面
- cgi-bin是什么
- 【FBI WARNING】DP 从看透到看开
- 蒙特卡洛求圆周率c语言代码,蒙特卡洛法求圆周率
- 地表最强三巨头【康惠保2.0】、【超级玛丽3号Max】、【达尔文3号】大PK!
- 英语人机考试计算机算分吗,过来人跟你说说英语人机对话考试的经验
- 论文阅读:《A Neural Conversational Model》
- 怎样对平面中的点进行顺时针或者逆时针排序
- 基于STM32与ESP8266的太空人WiFi天气时钟(代码开源)
- 【思维导图】计算机网络第四章网络层
热门文章
- Linux打印cups API及代码范例链接
- LINUX开发FIREFOX的插件:编译npruntime
- 解决办法:cv::randn(cv::_InputOutputArray const, cv::_InputArray const, cv::_InputArray const)’未定义的引用
- 管理感悟:如何处理不干活的主管
- 管理感悟:维护每日工作列表
- 博客积分排名进入前4万
- C# string转DateTime DateTime转string
- 为什么字符串中的字符无效_JavaScript中的基本字符串与字符串对象的区别
- python选取tensor某一维_python基础教程详解torch.Tensor的4种乘法
- 向量机和感知机的相同和不同点_感知机(perceptron)和支持向量机(svm)是一种东西吗?
如果不是那他们的区别和关系是什么?...