小鹏要逆袭的博客

前端/微信小程序flex布局笔记参考学习资料微信小程序官方文档html/wxml:<!--flex 布局学习 --> <view class="flex-study"> <view class="item-flex">1</view> <view class="item-flex">2</view> <view class="item-flex">3</view>

// 1.创建image对象var img = new Image();// 2.设定image对象的onload属性img.onload = function(){}// 3.绘制图像context.drawImage(image,x,y);context.drawImage(image,x,y,width,height);context.drawImage(im

语法：transform:none | [transform-function]* 常用的变形函数有：    1.matrix():定义矩阵变换                                     2.translate();移动元素                                     3.scale();缩放元素              

语法：transition:[||||||[,||||||]]*用法：transition: ,...(如果有更多用逗号隔开) Title div{ background-color:orange; width:400px; height:200px;

Title div{ margin:0 auto; width:1200px; height:405px; background:url(demo.jpg) center no-repeat; /*定义3d空间*/ -webkit

1.webkit渐变 Title body{ padding:0px; margin:0 auto; } div{ width:100%; height:40px; padding:4px;

使用html5 file api实现： uploadImg var imgbtn = document.getElementById("fileupload"); v

使用canvas实现另一个小时钟，效果图如下：前端html代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-widt

本文记载了如何使用canvas来实现雪花效果：效果图如下：本demo设计到的知识点有canvas的状态的保存于恢复，canvas的绘制径向渐变，使用html提供的被誉为神器的requestAnimationFrame  html主要代码如下：&lt;canvas class="myblog" id="mycanvas"&gt; &lt;/canvas&gt;主要的js代...

完成一个小项目，后端为SSM框架，前端使用了ZUI框架，下面记录了如何使用zui框架下的datagrid组件来实现传统页面下1.加载数据2.关键字搜索3.按照字段排序4.全选常用功能的实现，整个过程实现不复杂。为了方便以后直接使用和参考，和其他使用相同或类似技术开发人员直接上手，将整个过程记录下来。首先实现的页面效果如下：Demo前期的准备：本实例使用了acco...

1.绘制填充文字：context.fillText(text,x,y,[maxWidth]) function draw(){ var ctx = document.getElementById("myCanvas").getContext("2d"); ctx.font = "italic 35px 黑体"; ctx.fillStyle = "Red";

function draw(){ var ctx = document.getElementById("myCanvas").getContext("2d"); ctx.shadowOffsetX = 3; ctx.shadowOffsetY = 3; ctx.shadowBlur = 2; ctx.shadowColor = "rgba(0,0,0,0.5)";

function draw(){ // 获取context对象 var ctx = document.getElementById("myCanvas").getContext("2d"); // 调整坐标的位置 ctx.translate(200,20); // 循环遍历 for(var i = 1;i<50;i++){ // 保存状态 ctx

下面示范了使用canvas的基本步骤: canvas入门 // 第一步,在html5中添加canvas元素 // 第二步,获取到canvas元素 var c = document.getElementById('myCanvas'); // 第三步,通过canvas的getContext来获取其上下文创建Context对象(这里以

示例代码如下： canvas var canvas1 = document.getElementById("canvas1"); var c1 = canvas1.getContext("2d"); c1.moveTo(0,0); c1.lineTo(200,100); c1.stroke(); var canvas2 =

// 获取canvas对象  var c = document.getElementById("myCanvas"); // 获取context对象  var context = c.getContext("2d"); // 开始绘制图形 context.filStyle="#ff00ff";

function draw(){ var ctx = document.getElementById("myCanvas").getContext("2d"); ctx.translate(200,20); for(var i = 0;i<80;i++){ ctx.translate(30,30); ctx.scale(0.95,0.95);

var c = document.getElementById("myCanvas"); var context = c.getContext("2d"); context.fillStyle="red"; context.fillRect(50,25,100,100); context.fillStyle="green"; //context.globalAlpha=0.8;

function drawTop(ctx,fillStyle){ ctx.fillStyle = fillStyle; ctx.beginPath(); ctx.arc(0,0,30,0,Math.PI,true); ctx.closePath(); ctx.fill(); } function drawGrip(ctx){ ctx.save();

function draw(){ var ctx = document.getElementById("myCanvas").getContext("2d"); ctx.fillStyle="black"; ctx.fillRect(0,0,300,300); ctx.fill(); // 绘制圆形 ctx.beginPath(); ctx.arc(150

1,lineWidth(设置线条的粗细) function draw(){ var ctx = document.getElementById("myCanvas").getContext("2d"); for(var i = 0;i<12;i++){ ctx.strokeStyle = "red"; ctx.lineWidth=1+i;

function draw(){ var ctx = document.getElementById("myCanvas").getContext("2d"); var lingrad = ctx.createLinearGradient(0,0,0,200); lingrad.addColorStop(0,"#ff0000"); lingrad.addColorStop(

function draw(){ var ctx = document.getElementById("myCanvas").getContext("2d"); var radgrad = ctx.createRadialGradient(55,55,20,100,100,90); radgrad.addColorStop(0,"#ffffff"); radgrad.add

新增的元素如下，不过测试目前在chrom支持相对较好，但也有不兼容，总体来说新特性在当前主流的浏览器中实现的不是特别好，最好辅助第三方js插件来实现。 html5新增input类型用法 html5新增input输入类型 emial类型的使用