Canvas学习

一、熟悉一下:

window.οnlοad=function(){

var a=document.getElementById("can");

//检测a.getContext()

//alert(a.getContext);

if(a.getContext){

var ctx= a.getContext('2d');

//画布尺寸

ctx.width=400;

ctx.height=400;

//画笔样式

ctx.lineWidth=4;

ctx.strokeStyle="blue";

//填充样式

ctx.fillStyle='pink';

//绘画路径

ctx.beginPath();

ctx.moveTo(0,0);

ctx.lineTo(100,100);

//填充路径

ctx.fillRect(0,0,100,100);

ctx.stroke();

ctx.fill();

}

其他属性：Linecap

window.οnlοad=function(){

var a=document.getElementById("can");

//检测a.getContext()

//alert(a.getContext);

if(a.getContext){

var ctx= a.getContext('2d');

//画布尺寸

ctx.width=400;

ctx.height=400;

//画笔样式

ctx.lineWidth=20;

ctx.strokeStyle="blue";

//划横线函数，长度为100

function line() {

ctx.strokeStyle=arguments[2];

ctx.lineCap=arguments[1];

ctx.beginPath();

ctx.moveTo(50,arguments[0]);

ctx.lineTo(240,arguments[0]);

ctx.stroke();

}

line(30,'butt','red');//直角

line(60,'round','black');//圆角

line(90,'square','purple');//直角

}

二、画矩形strokeRect

//画矩形

function rect(x,y){

ctx.beginPath();

ctx.strokeRect(x,y,100,100);//四个参数,x,y,width,height

ctx.stroke();

}

!function () {

var i=0;

for(;i<10;i++){

rect(3*16*i,5*2);

}

}();

三、画圆arc(x,y,radius(半径),start,end,是否逆时针）

window.οnlοad=function(){

var a=document.getElementById("can");

//检测a.getContext()

//alert(a.getContext);

if(a.getContext){

var ctx= a.getContext('2d');

//画笔样式

ctx.lineWidth=4;

ctx.strokeStyle="blue";

//画圆,六个参数（x,y,radius(半径),start,end,是否逆时针）

function arc(){

ctx.beginPath();

ctx.strokeStyle='red';

ctx.arc(arguments[0],arguments[1],arguments[2],0,90*Math.PI/180,arguments[3]);

ctx.stroke();

};

setTimeout(function(){

ctx.clearRect(0,0,400,400);

(function (){

for(var i=0;i<10;i++){

var a=Math.random()*200;

var b=Math.random()*200;

var c=Math.abs(Math.random()*40);

var d=Math.floor(Math.random()*2);

console.log(d);

arc(a,b,c,d);

}

})();

setTimeout(arguments.callee,100);

},100)

}

四、画圆角矩形

五、清除画板clearRect(x,y,width,height)

//清除画板

ctx.arc(100,100,50,0,360*Math.PI/180,true);

ctx.fillStyle='pink';

ctx.fill();

ctx.clearRect(100,100,20,20);

六、贝塞尔曲线

//二次贝尔曲线

ctx.beginPath();

ctx.moveTo(20,20);

ctx.quadraticCurveTo(100,0,200,200);

ctx.stroke();

//三次贝尔曲线

ctx.beginPath();

ctx.moveTo(68,30);

ctx.bezierCurveTo(20,10,200,200,200,100);

ctx.stroke();

七、其他

剪切Cilp（）

//clip()

ctx.arc(100,100,50,0,360*Math.PI/180,true);

ctx.clip();//使用前后的效果对比

ctx.moveTo(100,100);

ctx.lineTo(300,300);

ctx.strokeStyle='red';

ctx.stroke();

八、绘制文字

//绘制文本fillText 与strokeText方法都是四个参数(文本内容,x,y,maxWidth);

//fillText()方法，需要fillstyle改变样式

var arr=['red','green','purple','black','yellow','#39f'];

function draw(){

ctx.beginPath();

console.log(arguments[2]);

ctx.fillStyle=arguments[2];

ctx.clearRect(0,0,400,400);

ctx.fillText("我爱三妹",arguments[0],arguments[1]);

}

(function(){

setTimeout(function(){

var a=Math.floor(Math.random()*6);

//console.log(arr[a]);

draw(Math.random()*300,Math.random()*200,arr[a]);

setTimeout(arguments.callee,300);

},300);

})();

//strokeText()方法，用strokeStyle改变样式

ctx.beginPath();

ctx.strokeText("我更爱三妹",100,100);

文字的其他样式设置：

//文字的一些设置

ctx.fontWeight='600';//文字粗细

ctx.font="30px";//文字大小

ctx.font='30px Arial';//文字字体;

ctx.font='bold 30px Arial';//文字粗体;

ctx.font='italic bold 30px Arial';//文字斜体;

文字对齐方式：

//文本对齐方式两种textAlign()和textBaseline()

ctx.textAlign='right';

ctx.textBaseline='bottom';

九、图片操作 drawImage() 与 putImageData()

//图片绘制drawImage()方法

ctx.drawImage(img,x,y);//在哪画，尺寸与原图尺寸一样

ctx.drawImage(img,dx,dy,dw,dh);//dw dh是相对dx dy的偏移量。缩放到哪

ctx.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);//剪切一块到哪，从哪到哪，在哪画多大的图

//获取图片资源的两种方法

//第一种用标签的方式

var img=document.getElementById("img");

ctx.drawImage(img,200,200,100,100);

//第二种用创建Image对象的方法

(function(){

var img=new Image();

img.src='face.jpg';

ctx.drawImage(img,100,100,200,200);

})()

//图片绘制getImageData()方法七个参数（图，在哪画，找图起始位置，尺寸）

//putImageData()方法

ctx.drawImage(img,200,200,100,100);

//获取像素数据

var img=ctx.getImageData(0,0,200,200);//获取这一区域内的像素信息

//将取得的数据画到画布上

ctx.putImageData(img,100,100,30,30,100,100);

canvas绘图基础整理相关推荐

Android中Canvas绘图基础详解（附源码下载）
看到了一篇比较详细的Canvas文章,转过来方便自己查看. 源地址:http://blog.csdn.net/iispring/article/details/49770651 Android中,如果 ...
Canvas绘图基础（一）
简单图形绘制矩形:描边与填充 Canvas的API提供了三个方法,分别用于矩形的清除.描边及填充 clearRect(double x, double y, double w, double h) ...
Canvas绘图基础
目录一.什么是Canvas? 二.Canvas元素的定义(写在html文件的body中) 三.使用JavaScript获取网页中的Canvas对象四.Canvas绘图 (1)绘制直线 (2)绘制矩 ...
java名片合成_HTML5 canvas绘图基础（电子名片生成器源码）
创建canvas 您的浏览器不支持canvas 基础设置 var canvas = document.getElementById('myCanvas');var ctx = canvas.getCo ...
前端使用Canvas绘图(基础知识)--持续更新中
文章目录前言 canvas文档一.canvas代码提示(插件和注释) 1.1.使用插件方式(推荐这种方式) =>canvas-snippets 1.2.使用注释方式二.初始canvas 2 ...
Android中Canvas绘图之Shader使用图文详解
概述我们在用Android中的Canvas绘制各种图形时,可以通过Paint.setShader(shader)方法为画笔Paint设置shader,这样就可以绘制出多彩的图形.那么Shader是什 ...
HTML5游戏开发技术基础整理
随着HTML5标准最终敲定,HTML5将有望成为游戏开发领域的的热门平台.HTML5游戏能够运行于包括iPhone系列和iPad系列在内的计算机.智能手机以及平板电脑上,是目前跨平台应用开发的最佳实施 ...
html5 canvas 画布基础
canvas 画布基础学习整理的笔记,内容丰富有绘制矩形,绘制线条,绘制二次贝塞尔曲线,绘制弧线等.知识点在代码注释中效果图: 代码: <!DOCTYPE html> <htm ...
Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...

canvas绘图基础整理

Canvas学习

一、熟悉一下:

其他属性：Linecap

二、画矩形strokeRect

三、画圆arc(x,y,radius(半径),start,end,是否逆时针）

四、画圆角矩形

五、清除画板clearRect(x,y,width,height)

六、贝塞尔曲线

七、其他

八、绘制文字

九、图片操作 drawImage() 与 putImageData()

canvas绘图基础整理相关推荐

最新文章

热门文章