html5 照相 矩形区域,html5 canvas（基本矩形）使用方法

html5 canvas(基本矩形)使用方法

发布于 2015-06-19 09:10:41 | 121 次阅读 | 评论: 0 | 来源: 网友投递

HTML5超文本标记语言万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五重大修改。

先从简单的开始

fillRect(x,y,width,height)

在坐标x,y的位置加上一个宽，高   如：

fillRect(0,0,500,500)//在坐标0，0处加上一个宽高500的填充矩形

strokeRect(x,y,width,height)

在坐标x,y的位置加上一个宽，高边框矩形

但是需要使用lineWidth,lineJoin,strokeStyle,miterLimit设置下面会给出矩形函数

clearRect(x,y,width,height)

清除坐标x,y的位置宽，高的一块区域是起完全透明

感觉有点像用ps时候一个黑色的图层，拉一个矩形选框，然后按个delect的感觉一块透明

然后设置一下填充样式

context.fillStyle=‘#000000‘ //填充颜色

context.strokeStyle=‘#ff00ff‘ //边框颜色

完整代码

矩形

window.addEventListener(‘load‘,eventWindowLoaded,false);

function eventWindowLoaded(){

canvasApp();

}

function canvasSupport(){

return Modernizr.canvas;

}

function canvasApp(){

if(!canvasSupport()){

return;

}else{

var theCanvas = document.getElementById(‘canvas‘)

var context = theCanvas.getContext("2d")

}

drawScreen();

function drawScreen(){

context.fillStyle="#000000"; //填充黑色

context.strokeStyle=‘#ff00ff‘ //边框为粉色

context.lineWidth=2; //边框宽度

context.fillRect(10,10,40,40) //矩形

context.strokeRect(0,0,60,60) //边框出现的位置

context.clearRect(20,20,20,20) //清除区域的位置

}

}

你的浏览器无法使用canvas

如有疑问加QQ：1035417613;小白童鞋；你的支持是我最大的快乐！！

结果就是这样一个

相关阅读:

html5 canvas(基本矩形)使用方法

HTML5- Canvas入门(一)

HTML5- Canvas入门(二)

HTML5- Canvas入门(三)

HTML5- Canvas入门(四)

HTML5- Canvas入门(五)

HTML5- Canvas入门(六)

html5 中的SVG 和canvas使用方法

HTML5+Canvas调用手机拍照功能实现图片上传(下)

HTML5+Canvas调用手机拍照功能实现图片上传(上)

HTML5 块元素标签的使用方法讲解

html5 canvas arcTo()使用示例