html5常用功能,canvas的常用功能(电脑版)

前言:

canvas可以单独算为前端的一大知识模块, 今天就研究一下.

先做下前文铺垫:

①创建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部分

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();

结语:

本文还有不足之处, 欢迎大家指正.

声明:

参考: 渡一教育