canvas画画板,canvas画五角星，canvas制作钟表、Konva写钟表
制作一个画画板，有清屏有橡皮擦有画笔可以换颜色
style样式
<head>
<meta charset="UTF-8">
<title>画画板</title>
<style>
body{
background-color:#ccc;
}
.control-bar{
vertical-align:top;
display:inline-block;
}
</style>
</head>
html结构
<canvas id="myCanvas"></canvas>
<div class="control-bar">
<button id="clearBtn">清屏</button>
<button id="penBtn">画笔</button>
<input type="color" id="colorBtn">
<button id="eraserBtn">橡皮擦</button>
</div>
script
<script>
(function(){
var w=800;//画画板的宽度
var h=600; //画画板的高度
//获取相关元素
var canvas=document.getElementById("myCanvas");
var penBtn=document.getElementById("penBtn");
var colorBtn=document.getElementById("colorBtn");
var eraserBtn=document.getElementById("eraserBtn");
var clearBtn=document.getElementById("clearBtn");
//画布大小设置
canvas.width=w;
canvas.height=h;
canvas.style.backgroundColor="#fff";
//获取绘图环境
var ctx=canvas.getContext("2d");
//鼠标按下事件
canvas.onmousedown=function(ev){
//求鼠标此时坐标
var x=ev.clientX-canvas.getBoundingClientRect().left;//getBoundingClientRect用于获取某个元素相对于视窗的位置集合
var y=ev.clientY-canvas.getBoundingClientRect().top+32;//32画笔/橡皮擦的宽度用于准确的定位
//开启路径 绘制起点
ctx.beginPath();
ctx.moveTo(x,y);
//鼠标移动
canvas.onmousemove=function(ev){
//求鼠标此时坐标
var x=ev.clientX-canvas.getBoundingClientRect().left;
var y=ev.clientY-canvas.getBoundingClientRect().top+32;
ctx.lineTo(x,y);
//绘制
ctx.stroke();
}
}
//鼠标抬起
canvas.onmouseup=function(){
this.onmousemove=function(){}
}
setPen();//默认画笔
//点击橡皮擦
eraserBtn.onclick=setEraser;
//点击画笔
penBtn.onclick=setPen;
//点击颜色选择
colorBtn.onchange=setPen;
//点击清屏
clearBtn.onclick=function(){
//ctx.clearRect(0,0,w,h)//和下面两种变法任选其一
canvas.width=canvas.width;
//重新设置画布的宽度，可以清除屏幕
setPen();
}
//设置为画笔的函数
function setPen(){
ctx.lineWidth=4;
ctx.strokeStyle=colorBtn.value;
document.body.style.cursor="url('./images/pen2.ico'),auto";
}
//设置为橡皮擦的函数
function setEraser(){
ctx.lineWidth=20;
ctx.strokeStyle="#fff";
document.body.style.cursor="url('./images/eraser2.ico'),auto";
}
})()
</script>
制作五角星或者多边形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转--</title>
<style>
body{
background:#ccc;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
var canvas=document.getElementById("myCanvas");
canvas.width=800;
canvas.height=600;
canvas.style.backgroundColor="#fff";
var ctx=canvas.getContext("2d");
drawStar(ctx,400,300,40,100);
drawStar(ctx,150,150,80,120,"yellow","red",5,12);
//声明绘制 五角星的函数
function drawStar(ctx,cx,cy,innerRadius,outerRadius,fill="transparent",stroke="#000",strokeWidth=2,numPoints=5){
var angle=Math.PI*2/numPoints;//每个角之间的弧度间隔
var startAngle=-Math.PI/2;//开始点的弧度
ctx.beginPath();
for(let i=0;i<numPoints;i++){
let x1=cx+outerRadius*Math.cos(startAngle+angle*i);
let y1=cy+outerRadius*Math.sin(startAngle+angle*i);
ctx.lineTo(x1,y1);
let x2=cx+innerRadius*Math.cos(startAngle+angle*i+angle/2);
let y2=cy+innerRadius*Math.sin(startAngle+angle*i+angle/2);
ctx.lineTo(x2,y2);
}
ctx.closePath();
ctx.fillStyle=fill;
ctx.strokeStyle=stroke;
ctx.lineWidth=strokeWidth;
ctx.stroke();
ctx.fill();
}
</script>
</body>
</html>
canvas制作钟表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas钟表</title>
<style>
canvas{
position:absolute;
}
</style>
</head>
<body>
<canvas id="dialCanvas"></canvas>
<canvas id="handCanvas"></canvas>
<script>
(function(){
//定义相关设置
var width=600;
var height=600;
var dialRadius=200;//表盘半径
var cx=width/2;
var cy=height/2;
//获取canvas
var dialCanvas=document.getElementById("dialCanvas");
var handCanvas=document.getElementById("handCanvas");
//设置画布大小
dialCanvas.width=width;
dialCanvas.height=height;
handCanvas.width=width;
handCanvas.height=height;
//获取绘图环境
var dialCtx=dialCanvas.getContext("2d");
var handCtx=handCanvas.getContext("2d");
//绘制表盘
dialCtx.beginPath();
dialCtx.arc(cx,cy,dialRadius,0,2*Math.PI);
dialCtx.lineWidth=10;
dialCtx.stroke();
//绘制小时的刻度
drawScale(dialCtx,cx,cy,dialRadius,dialRadius-20,"#000",10,12);
//绘制分钟的刻度
drawScale(dialCtx,cx,cy,dialRadius,dialRadius-10,"#000",5,60);
runTime();
//定义定时函数
function runTime(){
//获取当前时间
var date=new Date();
var s=date.getSeconds();
var m=date.getMinutes()+s/60;
var h=date.getHours()+m/60;
//清除屏幕
handCtx.clearRect(0,0,width,height);
//绘制秒针
drawHand(handCtx,cx,cy,s/60*Math.PI*2,180,"red",2);
//绘制分针
drawHand(handCtx,cx,cy,m/60*Math.PI*2,150,"#000",5);
//绘制时针
drawHand(handCtx,cx,cy,h/12*Math.PI*2,120,"#000",8);
setTimeout(runTime,1000);
/**
* 绘制指针
* @params object ctx
* @params number cx 表盘圆心坐标
* @params number cy表盘圆心坐标
* @params number angle 旋转的度数(弧度)
* @params number handLength指针长度
* @params string stroke指针颜色
* @params number strokeWidth 指针粗细度
*/
function drawHand(ctx,cx,cy,angle,handLength,stroke="#000",strokeWidth=2){
ctx.save();
ctx.translate(cx,cy);
ctx.rotate(angle-Math.PI/2);
ctx.beginPath();
ctx.moveTo(-20,0);
ctx.lineTo(handLength,0);
ctx.strokeStyle=stroke;
ctx.lineWidth=strokeWidth;
ctx.stroke();
ctx.restore();
}
/**
* 绘制刻度的函数
* @param object ctx
* @param number cx 圆心坐标
* @param number cy 圆心坐标
* @param number innerRadius 内半径
* @param number outerRadius 外半径
* @param string stroke 刻度颜色
* @param number strokeWidth 刻度宽度
* @param number numScales 刻度数量
*/
}
function drawScale(ctx,cx,cy,innerRadius,outerRadius,stroke="#000",strokeWidth=2,numScales=12){
ctx.beginPath();
var angle=0;
var changeAngle=Math.PI*2/numScales;
for(var i=0;i<numScales;i++){
//外圆上的点
var x1=cx+outerRadius*Math.cos(angle);
var y1=cy+outerRadius*Math.sin(angle);
//内圆上的点
var x2=cx+innerRadius*Math.cos(angle);
var y2=cy+innerRadius*Math.sin(angle);
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
angle+=changeAngle;
}
ctx.strokeStyle=stroke;
ctx.lineWidth=strokeWidth;
ctx.stroke();
}
})()
</script>
</body>
</html>
Konva写钟表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>konva 钟表</title>
<style>
html{
overflow:hidden;
}
body{
margin:0;
}
</style>
</head>
<body>
<div id="clock"></div>
<script src="../konva/konva.min.js"></script>
<script>
(function(){
//创建舞台
var stage=new Konva.Stage({
width:window.innerWidth,
height:window.innerHeight,
container:"#clock"
});
//创建表盘图层
var dialLayer=new Konva.Layer({
});
stage.add(dialLayer);
//表盘圆圈
var circle=new Konva.Circle({
x:stage.getWidth()/2,
y:stage.getHeight()/2,
radius:200,
stroke:"#000",
strokeWidth:10
});
dialLayer.add(circle);
//绘制小时刻度
var hourScale=new DialScale({
x:stage.getWidth()/2,
y:stage.getHeight()/2,
outerRadius:200,
innerRadius:180,
strokeWidth:10,
stroke:"#000"
});
dialLayer.add(hourScale);
//绘制分钟的坐标
var minuteScale=new DialScale({
x:stage.getWidth()/2,
y:stage.getHeight()/2,
outerRadius:200,
innerRadius:190,
strokeWidth:6,
stroke:"#000",
numScales:60
});
dialLayer.add(minuteScale);
dialLayer.draw();
//创建指针图层
var handLayer=new Konva.Layer({
x:stage.getWidth()/2,
y:stage.getHeight()/2
});
stage.add(handLayer);
//秒钟
var secondHand=new Konva.Line({
points:[-20,0,180,0],
stroke:"red",
strokeWidth:2
});
handLayer.add(secondHand);
//分针
var minuteHand=new Konva.Line({
points:[-20,0,150,0],
stroke:"#000",
strokeWidth:5
});
handLayer.add(minuteHand);
//时针
hourHand=new Konva.Line({
points:[-20,0,120,0],
stroke:"#000",
strokeWidth:8
});
handLayer.add(hourHand);
//小圆圈
var smallCircle=new Konva.Circle({
x:0,
y:0,
radius:10,
fill:"#000"
});
handLayer.add(smallCircle);
handLayer.draw();
runTime();
function runTime(){
var date=new Date();
var s=date.getSeconds();
var m=date.getMinutes()+s/60;
var h=date.getHours()+m/60;
secondHand.rotation(s/60*360-90);
minuteHand.rotation(m/60*360-90);
hourHand.rotation(h/12*360-90);
handLayer.draw();
setTimeout(runTime,1000);
}
// 绘制刻度的构造函数
function DialScale(options){
options=options ||{};
this.x=options.x ||0;
this.y=options.y || o;
this.innerRadius = options.innerRadius || 0;
this.outerRadius = options.outerRadius ||0;
this.numScales=options.numScales || 12;
this.stroke=options.stroke ||"#000";
this.strokeWidth=options.strokeWidth ||2;
var group=new Konva.Group({
x:this.x,
y:this.y
});
var angle=0;
var changeAngle=Math.PI*2/this.numScales;
for(var i=0;i<this.numScales;i++){
//外圆的点
var x1=Math.cos(angle)*this.outerRadius;
var y1=Math.sin(angle)*this.outerRadius;
//内圆的点
var x2=Math.cos(angle)*this.innerRadius;
var y2=Math.sin(angle)*this.innerRadius;
var line=new Konva.Line({
points:[x1,y1,x2,y2],
stroke:this.stroke,
strokeWidth:this.strokeWidth
});
group.add(line);
angle+=changeAngle;
}
return group;
}
})();
</script>
</body>
</html>canvas画画板,canvas画五角星，canvas制作钟表、Konva写钟表的更多相关文章
- Html5新特性 <canvas>画板画直线
以下样例为用canvas标签画多条直线 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
- Android利用canvas画画板
首先新建一个项目工程,建立文件,如下图所示
- canvas游戏小试：画一个按方向键移动的圆点
canvas游戏小试:画一个按方向键移动的圆点 自己对canvas,但又有一颗做游戏的心TT.然后记录一下对canvas的学习吧,用一个按方向键控制的小圆点来做练习.(编程时用了一些es6的语法) ...
- 【分享】用Canvas实现画板功能
前言 PC端测试:QQ浏览器全屏绘画完成.缩小时内容会被清空,切换背景颜色内容会被重置,其他暂无发现: 手机端测试:微信内置浏览器不通过:Safari 浏览器使用画笔时没固定页面会有抖动效果,使用橡皮 ...
- canvas小画板——（2）荧光笔效果
我们在上一篇文章中讲了如何绘制平滑曲线 canvas小画板——(1)平滑曲线. 透明度实现荧光笔 现在我们需要加另外一种画笔效果,带透明度的荧光笔.那可能会觉得绘制画笔的时候加上透明度就可以了.我们来 ...
- canvas小画板——（3）笔锋效果
画线准备 准备一个canvas <canvas id="canvasId" width="1000" height="800"> ...
- canvas实现画板
canvas实现画板 主要用到知识点: 鼠标事件onmousedown() onmousemove() onmouseup() onmouseleave() 事件委托 canvas的一些方法 如:绘制 ...
- canvas简易画板
代码展示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 一款基于HTML5 Canvas的画板涂鸦动画
今天给各网友分享一款基于HTML5 Canvas的画板涂鸦动画.记得之前我们分享过一款HTML5 Canvas画板工具,可以切换不同的笔刷,功能十分强大.本文今天要再来分享一款基于HTML5 Canv ...
随机推荐
- 【题解】CF#1012 C-Hill
感觉这题的状态还是比较明显的.设置状态 \(f[i][j][0/1]\) 表示dp到第 \(i\) 个位置,前面(包括这里)已经出现了 \(j\) 个山峰,当前位置是不是山峰即可 dp.这样的状态有一 ...
- BZOJ2005：[Noi2010]能量采集——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=2005 Description 栋栋有一块长方形的地,他在地上种了一种能量植物,这种植物可以采集太阳光 ...
- 模板：数论 & 数论函数 & 莫比乌斯反演
作为神秘奖励--?也是为了方便背. 所有的除法都是向下取整. 数论函数: \((f*g)(n)=\sum_{d|n}f(d)g(\frac{n}{d})\) \((Id*\mu)(n)=\sum_{d ...
- JavaScript去除空格trim()的原生实现
W3C那帮人的脑袋被驴踢了,直到javascript1.8.1才支持trim函数(与trimLeft,trimRight),可惜现在只有firefox3.5支持.由于去除字符串两边的空白实在太常用,各 ...
- 深入JavaScript对象创建的细节
最近深入学习javascript后,有个体会:面向对象的方式编程才是高效灵活的编程,也是现在唯一可以让代码更加健壮的编程方式.如果我们抛开那些玄乎的抽象出类等等思想,我自己对面向对象的从写程序的角度理 ...
- 后端日期类属性date 不接受string类型日期，都是没找到解决的方法，所有前端传回的string字符串都一一转化为java定义的类型
1.比如日期 我们可以是yyyy-MM-dd 亦可以是 yyyy-MM-dd HH:mm:ss 方法1在java代码中需要的字段上加上注解 写上日期类型,不过这样很麻烦,每个人写了日期类型的接收前端的 ...
- git 回退
回退命令: $ git reset --hard HEAD^ 回退到上个版本$ git reset --hard HEAD~3 回退到前3次提交之前,以此类推,回退到n次提交之前 $ git rese ...
- linux和windows多线程的异同
linux多线程及线程同步和windows的多线程之间的异同 并不是所有的程序都必须采用多线程,有时候采用多线程性能还不如单线程.采用多线程的好处如下: (1)多线程之间采用相同的地址空间,共享大部分 ...
- svn稀疏目录--通过设置工作目录的深度(depth)实现目录树的部分签出
对于一个大的版本库来说,本地工作目录签出整个目录树是即费时又占地儿的.虽然可以只签出某个子目录树,但有时候还是需要从根目录签出.那么,怎么才能只把自己感兴趣的子目录签出来呢? 从svn1.5版开始,提 ...
- [洛谷P3304] [SDOI2013]直径
洛谷题目链接:[SDOI2013]直径 题目描述 小Q最近学习了一些图论知识.根据课本,有如下定义.树:无回路且连通的无向图,每条边都有正整数的权值来表示其长度.如果一棵树有N个节点,可以证明其有且仅 ...