前言:
canvas可以单独算为前端的一大知识模块, 今天就研究一下.
先做下前文铺垫:
①创建canvas
②获取canvas
var cavs = lementbyid("cavs"); //获取canvas
var ctx = text("2d"); //可以理解为生成一个2d画笔
ctx.lineto(200, 200); //结束点
③常用样式
ctx.strokestyle = "#f00" //线条的颜色2
ctx.linewidth = 10; //线条粗细
④绘制线条
ctx.stroke(); //绘制线条
⑤填充图案
ctx.fillstyle = "yellow"; //填充颜色
ctx.fill(); //进行填充
⑥开始结束
ctx.beginpath(); //开始
ctx.closepath(); //结束
⑦其他
var img = imagedata(x, y, width, height); //截取canvas中图案
ctx.putimagedata(img, width, height) //将img放到canvas中
ctx.clearrect(x,y,canvas.width,canvas.height) //清除画布
正文:
说再多也没用, 最终还是进行实战, 终于进入正文了;
html部分
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) {
lementbyid(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 = text("2d");
ctx.linewidth = 15;
ctx.linecap = "round"; //线条始终的样式
ctx.linejoin = "round"; //转弯的圆角
var c_x = cavs.offsetleft, //元素距离左侧的位置
c_y = cavs.offsettop; //canvas距离顶部
e = e || window.event;
self.bool = true;
var m_x = e.pagex - c_x;
var m_y = e.pagey - c_y;
ctx.beginpath();
var imgdata = imagedata(0, 0, cavs.width, cavs.height); //将每次画完拷贝到数组中
self.arrimg.push(imgdata);
}
if(self.bool){
ctx.lineto(e.pagex-c_x, e.pagey-c_y);
ctx.stroke();
}
}
self.bool = false;
ctx.closepath();
}
e = e || window.event;
//console.log(e.target.value)
ctx.strokestyle = e.target.value;
}
lick = function(){
ctx.clearrect(0,0,cavs.width,cavs.height)
}
ctx.strokestyle = "#fff";
}
if (self.arrimg.length>0) {
ctx.putimagedata(self.arrimg.pop(),0,0)
}
}
hange = function(e){ //设置线条粗细
//console.log(e.target.value)
ctx.linewidth = e.target.value;
}
}//draw end
}
darwinglineobj.init();
结语:
本文还有不足之处, 欢迎大家指正.
声明:
参考: 渡一教育
本文发布于:2024-01-28 22:47:06，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170645322910842.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
