canvas的学习
canvas的学习
一、 //获取画布
var mycanvasEle = document.getElementById("mycanvas");
二、 //内容
var ctx = mycanvasEle.getContext("2d");
三、矩形
//(x, y, width, heiht)
ctx.rect(200, 200, 100, 100);//生成一个矩形,把矩形加入缓存
//设置颜色
ctx.fillStyle = "gray";
//填充
ctx.fill();//画上去
ctx.rect(50, 50, 100, 100);//把矩形放入缓存
//设置颜色
ctx.strokeStyle = "gray";
//描边
ctx.stroke();//画上去,这个地方画了两个矩形
//创建并画矩形
ctx.fillRect(50, 200, 100, 100);//不会放入缓存
ctx.strokeRect(200, 50, 100, 100);
四、线条
//把笔头挪动到某个位置
ctx.moveTo(100, 20);
//从当前位置画到某个位置
ctx.lineTo(100, 100);
五、画圆
ctx.beginPath();
/*
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
x:圆的中心的 x 坐标。
y:圆的中心的 y 坐标。
r:圆的半径。
sAngle:起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)。
eAngle:结束角,以弧度计。
counterclockwise:可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。
*/
ctx.arc(100, 100, 20, 0.5 * Math.PI, 2 * Math.PI);
ctx.stroke();
//ctx.fill();//从结束点到起始点全部填满
六、文字
ctx.font = "20px 微软雅黑";
ctx.textBaseline = "top";
ctx.shadowBlur = 10;
ctx.shadowColor="black";
ctx.fillText("阿杰,你好!!", 0, 0);
七、套路
ctx.rect(50, 50, 100, 100);
ctx.arc(50, 50, 50, 0, Math.PI * 2);
ctx.beginPath();//清空缓存的图形(矩形、线条、原型)
ctx.stroke();
ctx.moveTo(50, 150);
ctx.lineTo(50, 250);
ctx.lineTo(100, 250);
ctx.closePath();//回到起点
ctx.stroke();
//套路:一块整体中,先beginPath开头,closePath结束
八、save和restore
ctx.save();//保存当前状态
ctx.rect(100, 100, 100, 100);
ctx.fillStyle = "yellow";//状态1~~~
ctx.translate(100, 100);//状态2~~~
ctx.restore();//回到上一个save的状态
ctx.fill();
//save和restore要搭配使用,不然要出问题
九、对象
举例说明:
<script>
function Student(name, age) {
this.name = name;
this.age = age;
this.rects = [];
this.fillStyle = "yellow";
this.study = function() {
console.info("我叫" + this.name);
}
this.rect = function() {
this.rects[this.rects.length] = "新的矩形";
}
this.fill = function() {
for (var i = 0, len = this.rects.length; i < len; ++i) {
console.info("画" + this.fillStyle + "色的" + this.rects[i]);
}
}
}
var stu = new Student("zhangsan", 18);
stu.study();
stu.rect();//创建矩形
stu.rect();//创建矩形
// console.info(stu.rects);
stu.fill();//画
</script>
canvas的学习的更多相关文章
- HTML5 <canvas> 基础学习
HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形 创建一个画布( ...
- canvas一周一练 -- canvas基础学习
从上个星期开始,耳朵就一直在生病,里面长了个疙瘩,肿的一碰就疼,不能吃饭不能嗨 (┳_┳)……在此提醒各位小伙伴,最近天气炎热,一定要注意防暑上火,病来如山倒呀~ 接下来我正在喝着5块一颗的药学习ca ...
- canvas基础学习(四)
今天逛天猫时,看见优衣库店铺首页有个这个飘雪效果,顿时觉得好酷炫,立马从里面copy代码进行学习. 之前我也做过一些canvas特效,往往在canvas全屏时,canvas下层的div就无法进行dom ...
- canvas基础学习(二)
一.图像绘制 canvas绘制图像的方法是ctx.drawImage();该方法有三种使用方式 1.ctx.drawImage(img,x,y); img是指图像对象,x和y分别是这个图像左上角在ca ...
- canvas 的学习
canvas 绘制直线的API有: 1.moveTo()起点坐标. 2.lineTo()绘制的直线 3. fillStyle以及 flii()是绘制实体的 4. strokeStyle 和stroke ...
- Canvas基础学习(一)——实现简单时钟显示
HTML5最受欢迎的功能就是<canvas>元素.这个元素负责在页面中设定一个区域,然后就可以通过JavaScript动态地在这个区域中绘制图形.关于<canvas>元素的一些 ...
- Canvas 绘图学习笔记2
1 绘制文本 fillText(string,x,y,maxWidth) //填充试绘制文本 strokeText(string,x,y,maxWidth) 画线试绘制文本 设置字体样式: cont ...
- canvas基础学习
/** * Created by ty on 2016/7/11. * canvas 基础 */ window.onload = function() { var canvas = document. ...
- canvas基础学习笔记
canvas基本用法 1.什么是canvas(画布) <canvas> 是 HTML5 新增的元素,可用于通过使用JavaScript中的脚本来绘制图形,例如,它可以用于绘制图形,创建动 ...
随机推荐
- jrebel配置热部署参数
jrebel配置热部署参数: -noverify -agentpath:D:/jrebel/lib/jrebel64.dll -Drebel.dirs=E:/workspace/item/src/ma ...
- Maven转化为Dynamic Web Module
如今Maven仍然是最常用的项目管理工具,若要将Java Web项目使用Maven进行管理,则首先需要新建Maven项目,然后将其转化为web项目. 在项目右键选择properties,然后点击左侧P ...
- 2017全球互联网技术大会回顾(附PPT)
有幸遇见 GITC2017上海站,刚好遇见你! 为期两天(6.23~24)的GITC大会在上海举行,我有幸参加了24号的那场,也就是上周六,之所以今天才来回顾,是我想等PPT出来后分享给大家! 这应该 ...
- 【LeetCode】217. Contains Duplicate
题目: Given an array of integers, find if the array contains any duplicates. Your function should retu ...
- NavigationView的头部的事件监听
现在App的UI设计中Drawerlayout+NavigationView是一个比较常用的设计了,而以前我一般只是在Navigation中的menu(即下部的item中)添加事件监听,而今天碰到一个 ...
- javaweb利用filter拦截请求
项目上有个小需求,要限制访问者的IP,屏蔽未授权的登录请求.该场景使用过滤器来做再合适不过了. SecurityFilter.java: package com.lichmama.webdemo.fi ...
- Struts2+Spring+Hibernate+Jbpm技术实现Oa(Office Automation)办公系统第一天框架搭建
=============编码规范,所有文健,所有页面,所有数据库的数据表都采用UTF-8编码格式,避免乱码:===========开发环境:jdk1.7+tomcat8.0+mysql5.7+ecl ...
- 如何快速轻松学习bootstrap
我以前也是通过看一些视频教程来学的,比如慕课网上的,比如51cto上的那些零基础入门bootstrap什么的,还有一些培训班里流传出来的,感觉晕乎乎的,不知所云. 还是在后面不断使用的过程中慢慢体会到 ...
- JS - 实现简单易用的倒计时 x 天 x 时 x 分 x 秒
<script> (function () { var tian = document.getElementsByClassName('JS-tian')[0]; var shi = do ...
- Android Studio2.1 Run APP:Error: Execution failed for task
Android Studio2.1 Run APP时,遇到错误 Error: Execution failed for task ':app:clean'. Unable to delete file ...