在web页面增加画布
<canvas id="lookwhatIdrew" width="600" height="200"></canvas>
- canvas（画布）元素是一个正常的HTML元素，首先是一个开始<canvas>标记。
- 我们增加一个id来标识这个画布，稍后会看到如何使用这个id
- width属性定义它在web页面中水平方向占多少个像素。
- height定义它所占的页面垂直区域。
画布四周可以环绕HTML，画布与其他元素没有什么不同。
- 一个页面可以有多个画布，你可以为每个画布指定一个唯一的id,这样能够将它们作为唯一的画布来进行绘制。
在画布上绘制四方形
我们使用javascript在画布上面绘制一个x=10 y=10 长宽都是100px的图片
<script>
window.onload = function() {
var canvas = document.getElementById("lookwhatIdrew");
var context = canvas.getContext("2d");
context.fillRect(10,10,100,100);
};
</script>
- 首先需要通过画布的id获取画布的引用。
- 我们需要通过画布的一个“2d”上下文来具体绘制
- 矩形的填充默认是黑色。通过fillRect来进行填充。可以通过fillStyle属性改变默认填充色。context.fillStyle = "lightblue"
如果使用代码来检测浏览器是否支持画布，需要使用canvas对象中是否存在getContext方法，如下；
var convas = document.getElementById("lookwhatIdrew");
if(canvas.getContext) {
//you have canvas
}else {
//sorry no canvas API support
}
注意：我们并没有调用getContext这个方法，只是查看它是否有值，所以不使用canvas.getContext().
如果没有提供画布元素支持，你可以向用户发送一个有好的消息，告诉他们应该升级。浏览器看到一个它不认识的元素，默认行为就是显示其中包含的文本。所以，不支持画布的浏览器看到<canvas>元素时，它就显示其中的文本，如下：
<canvas id="lookwhatIdrew" width="600" height="200">
Hey you, you, upgrade your browser !!
</canvas>
在画布上绘制三角形
- 使用beginPath方法告诉画布我们要开始一个新路径
context.beginPath();
- 使用moveTo方法把“铅笔”移动到画布上的一个指定点，可以认为把铅笔放在这一点上。
context.moveTo(100, 150);
- lineTo方法描述路径，从铅笔的当前位置描到画布上的另一个点。
context.lineTo(250, 70);
- 我们已经完成三角形的第一条边，现在再来画第二条线。
context.lineTo(125, 30);
- 使用closePath方法闭合路径。
context.closePath();
- 设置线宽
context.lineWidth = 5;
- 用线描述路径
context.stroke();
8 .设置颜色用来红色填充三角形
context.fillStyle = "red";
9 .填充三角形
context.fill();
在画布上绘制圆形
- 使用beginPath方法告诉画布我们要开始一个新路径
context.beginPath();
- 使用arc方法来绘制圆形
context.arc(150, 150, 50, 0, 2 *Math.PI, true);
3 .设置颜色用来红色填充圆形
context.fillStyle = "red";
4 .填充圆形
context.fill();
下面深入分析arc方法，查看它的各个参数：
context.arc(x, y, radius, startAngle, endAngle, direction);
- x和y参数确定圆心在画布上的位置。
- radius这个参数指定圆的半径(宽度的1/2)
- startAngle,endAngle表示弧的起始角和终止角来确定圆上的起点和终点。
- diretion是布尔值，如果为true，就表示逆时针画弧。如果为false，则表示顺时针画弧。而角度是从右边中间位置开始算0度，所以这个需要注意。
使用度转化为弧度封装的方法
function degreesToRadians(degrees) {
return (degrees * Math.PI)/180;
}
在画布中添加文本
context = canvas.getContext("2d");
context.fillStyle = "red";
context.font = "bold 1em sans-serif";
context.textAlign = "left";
context.fillText = ("Hello world", 20, 40); //20 40是开始点
在画布中添加图片
- 首先需要一张图片，要把这个图像放在画布上，需要一个javaScript image对象。可以通过下面方法得到：
var twitterBird = new Image();
twitterBird.src = "twitterBird.png";
- 使用一个上下文方法在画布上绘制这个图像，通过方法drawImage方法
context.drawImage(twitterBird, 20, 120, 70, 70);
//20 ,20 是指定的x y 的位置
// 70 ,70是宽和高
- 关于图像还有一点需要知道，图像并不总会立即加载，所以在绘制图像之前需要确保图像已经完全加载。要实现一个onload处理程序：
twitterBird.onload = function() {
context.drawImage(twitterBird, 20, 120, 70, 70);
}
把画布转化为图片
function makeImage() {
var canvas = document.getElementById("tshirtCanvas");
canvas.onclick = function() {
window.location = canvase.toDataURL("image/png");
};
}
知行办公，专业移动办公平台https://zx.naton.cn/
【总监】十二春秋之，3483099@qq.com；
【Master】zelo，616701261@qq.com；
【运营】运维艄公，897221533@qq.com；****
【产品设计】流浪猫，364994559@qq.com；
【体验设计】兜兜，2435632247@qq.com；
【iOS】淘码小工，492395860@qq.com；iMcG33K，imcg33k@gmail.com；
【Android】人猿居士，1059604515@qq.com；思路的顿悟，1217022114@qq.com；
【java】首席工程师MR_W，feixue300@qq.com；
【测试】土镜问道，847071279@qq.com；
【数据】fox009521，42151960@qq.com；
网友评论