前言:
canvas可以单独算为前端的一大知识模块, 今天就研究一下.
先做下前文铺垫:
①创建canvas
<canvas id="mycanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
②获取canvas
我要评论 var cavs = document.getelementbyid("cavs"); //获取canvas
var ctx = cavs.getcontext("2d"); //可以理解为生成一个2d画笔
ctx.moveto(100, 100); //落笔点
ctx.lineto(200, 200); //结束点
③常用样式
ctx.strokestyle = "#f00" //线条的颜色2
ctx.linewidth = 10; //线条粗细
④绘制线条
ctx.stroke(); //绘制线条
⑤填充图案
ctx.fillstyle = "yellow"; //填充颜色
ctx.fill(); //进行填充
⑥开始结束
ctx.beginpath(); //开始
ctx.closepath(); //结束
⑦其他
var img = ctx.getimagedata(x, y, width, height); //截取canvas中图案
ctx.putimagedata(img, width, height) //将img放到canvas中
ctx.clearrect(x,y,canvas.width,canvas.height) //清除画布
正文:
说再多也没用, 最终还是进行实战, 终于进入正文了;
html部分
<div class="wrapper">
<canvas id="cavs" width="1000" height="500"></canvas>
<ul class="btn-list">
<li><input type="color" id="colorboard"></li>
<li><input type="button" id="cleanboard" value="清屏"></li>
<li><input type="button" id="eraser" value="橡皮"></li>
<li><input type="button" id="rescind" value="撤销"></li>
<li><input type="range" id="lineruler" value="线条" min="1" max="30"></li>
</ul>
</div>
css部分
*{
padding: 0;
margin: 0;
}
.wrapper{
margin: 15px;
}
.wrapper canvas{
border:1px solid #000;
border-radius: 25px;
box-shadow:10px 10px 5px #999;
margin-bottom: 20px;
}
.wrapper ul{
width: 1000px;
text-align: center;
}
.wrapper ul li{
display: inline-block;
margin-left: 40px;
}
.wrapper ul li input{
display: block;
background: #ddd;
color: #000;
border-radius: 25px;
border:none;
padding: 10px 20px;
font-size: 15px;
transition-duration: 0.2s;
}
.wrapper ul li input:hover{
background: #999;
border: 1px solid #f00;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.3);
}
js部分
function id(str) {
return document.getelementbyid(str);
}
var darwinglineobj = {
cavs:this.id("canvas"),
color:this.id("color"),
clear:this.id("clear"),
eraser:this.id("eraser"),
rescind:this.id("rescind"),
weight:this.id("weight"),
bool:false,
arrimg:[],
//初始化
init:function(){
this.draw();
},
draw:function(){
var cavs = this.cavs,
self = this,
ctx = cavs.getcontext("2d");
ctx.linewidth = 15;
ctx.linecap = "round"; //线条始终的样式
ctx.linejoin = "round"; //转弯的圆角
var c_x = cavs.offsetleft, //元素距离左侧的位置
c_y = cavs.offsettop; //canvas距离顶部
cavs.onmousedown = function(e){
e = e || window.event;
self.bool = true;
var m_x = e.pagex - c_x;
var m_y = e.pagey - c_y;
ctx.beginpath();
ctx.moveto(m_x,m_y); //鼠标在画布上的触点
var imgdata = ctx.getimagedata(0, 0, cavs.width, cavs.height); //将每次画完拷贝到数组中
self.arrimg.push(imgdata);
}
cavs.onmousemove = function(e){
if(self.bool){
ctx.lineto(e.pagex-c_x, e.pagey-c_y);
ctx.stroke();
}
}
cavs.onmouseup = function(e){
self.bool = false;
ctx.closepath();
}
self.color.onchange = function(e){ //设置颜色
e = e || window.event;
//console.log(e.target.value)
ctx.strokestyle = e.target.value;
}
self.clear.onclick = function(){
ctx.clearrect(0,0,cavs.width,cavs.height)
}
self.eraser.onclick = function(){
ctx.strokestyle = "#fff";
}
self.rescind.onclick = function(){ //撤销的重点难点
if (self.arrimg.length>0) {
ctx.putimagedata(self.arrimg.pop(),0,0)
}
}
self.weight.onchange = function(e){ //设置线条粗细
//console.log(e.target.value)
ctx.linewidth = e.target.value;
}
}//draw end
}
darwinglineobj.init();
结语:
本文还有不足之处, 欢迎大家指正.
声明:
参考: 渡一教育
如对本文有疑问， 点击进行留言回复！！
网友评论