html5中用画布画小狗,HTML5中的Canvas(绘制)
Canvas中不仅可以画线(路径),还能画很多其他的图像,这一章就介绍Canvas的其他两种绘图API。
矩形
我们在上一章只用线来画了一个矩形,其实可以一下子就画出来的,用下面函数:
ctx.fillRect(x, y, width, height)画一个填充的矩形,x, y是矩形左上坐标,剩余两个不是右下坐标而是宽度和高度。
ctx.strokeRect(x, y, width, height)类似的,不过只画线不填充。
ctx.clearRect(x, y, width, height)把指定的区域删除。
我们先准备三个Canvas,(html代码如下):
fillRect()
strokeRect()
clearRect()
1
2
3
4
5
6
fillRect()
strokeRect()
clearRect()
然后是我们的绘图参数:
JavaScript
onload = function() {
draw1();
draw2();
draw3();
};
/* fillRect() */
function draw1() {
var canvas = document.getElementById('c1');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillRect(20, 20, 80, 40);
}
/* strokeRect() */
function draw2() {
var canvas = document.getElementById('c2');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.strokeRect(20, 20, 80, 40);
}
/* clearRect() */
function draw3() {
var canvas = document.getElementById('c3');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillRect(20, 20, 100, 100);
ctx.beginPath();
ctx.clearRect(50, 70, 60, 30);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
οnlοad=function(){
draw1();
draw2();
draw3();
};
/* fillRect() */
functiondraw1(){
varcanvas=document.getElementById('c1');
if(!canvas||!canvas.getContext){returnfalse;}
varctx=canvas.getContext('2d');
ctx.beginPath();
ctx.fillRect(20,20,80,40);
}
/* strokeRect() */
functiondraw2(){
varcanvas=document.getElementById('c2');
if(!canvas||!canvas.getContext){returnfalse;}
varctx=canvas.getContext('2d');
ctx.beginPath();
ctx.strokeRect(20,20,80,40);
}
/* clearRect() */
functiondraw3(){
varcanvas=document.getElementById('c3');
if(!canvas||!canvas.getContext){returnfalse;}
varctx=canvas.getContext('2d');
ctx.beginPath();
ctx.fillRect(20,20,100,100);
ctx.beginPath();
ctx.clearRect(50,70,60,30);
}
结果如下图所示,就不提供实际的演示文件了,请自己输入确认。
上一次我们使用线绘的时候,还是用了fill和stroke方法,现在是不需要的。
圆(弧)
先看一下参数:
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)
画圆或者圆弧。x,y为圆心坐标,radius为半径,startAngle,endAngle为开始/结束划圆的角度,anticlockwise为是否逆时针画圆(True为逆时针,False为顺时针)。
注意这里的角度为弧度制,所以如果画一个正圆的话,是0 -> Math.PI * 2,而画60°的话,就是0 -> 60 * Math.PI / 180,最过分的是,这个和我们一般几何里的x方向0°,y方向90°反过来了……利用上面的Canvas,再画圆试试:
JavaScript
onload = function() {
draw1();
draw2();
draw3();
};
/* 整个圆 */
function draw1() {
var canvas = document.getElementById('c1');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(70, 70, 60, 0, Math.PI*2, false);
ctx.stroke();
}
/* 10° ~ 80°,无填充 */
function draw2() {
var canvas = document.getElementById('c2');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(70, 70, 60, 10 * Math.PI / 180, 80 * Math.PI / 180, true);
ctx.stroke();
}
/* 10° ~ 80°,填充 */
function draw3() {
var canvas = document.getElementById('c3');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(70, 70, 60, 10 * Math.PI / 180, 80 * Math.PI / 180, true);
ctx.fill();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
οnlοad=function(){
draw1();
draw2();
draw3();
};
/* 整个圆 */
functiondraw1(){
varcanvas=document.getElementById('c1');
if(!canvas||!canvas.getContext){returnfalse;}
varctx=canvas.getContext('2d');
ctx.beginPath();
ctx.arc(70,70,60,0,Math.PI*2,false);
ctx.stroke();
}
/* 10° ~ 80°,无填充 */
functiondraw2(){
varcanvas=document.getElementById('c2');
if(!canvas||!canvas.getContext){returnfalse;}
varctx=canvas.getContext('2d');
ctx.beginPath();
ctx.arc(70,70,60,10*Math.PI/180,80*Math.PI/180,true);
ctx.stroke();
}
/* 10° ~ 80°,填充 */
functiondraw3(){
varcanvas=document.getElementById('c3');
if(!canvas||!canvas.getContext){returnfalse;}
varctx=canvas.getContext('2d');
ctx.beginPath();
ctx.arc(70,70,60,10*Math.PI/180,80*Math.PI/180,true);
ctx.fill();
}
结果如下图的上三个情况,也请自己输入加深印象。
下图为startAngle=1.1PI,endAngle=1.9PI,anticlockwise为false的情况下的绘制情况,注意从x轴方向开始,往下走角度开始。
这个方法便需要用户手动调用fill或stroke方法(为什么如此不统一……)。
到现在为止画的图像都是黑白的,下一次讲述颜色,HTML5中的Canvas(颜色)。
html5中用画布画小狗,HTML5中的Canvas(绘制)相关推荐
- 用画小狗的方法来解释Java中的值传递
在开始看我画小狗之前,咱们先来看道很简单的题目: 下面程序的输出是什么? 如果你的回答是"小强",好,恭喜你答对了.下面我们改一下代码: 是的,我只是在changeName方法里面 ...
- 刻画小狗状态java_用画小狗的方法来解释Java中的值传递
在开始看我画小狗之前,咱们先来看道很简单的题目: 下面程序的输出是什么? Dog myDog = new Dog("旺财"); changeName(myDog); System. ...
- php代码输出笑脸,利用HTML5中的Canvas绘制笑脸的代码
这篇文章主要介绍了利用HTML5中的Canvas绘制一张笑脸的教程,使用Canvas进行绘图是HTML5中的基本功能,需要的朋友可以参考下 今天,你将学习一项称为Canvas(画布)的web技术,以及 ...
- 用html语言编写笑脸,怎么使用HTML5中的Canvas绘制笑脸
怎么使用HTML5中的Canvas绘制笑脸 发布时间:2021-02-26 09:33:14 来源:亿速云 阅读:75 作者:清风 这篇"怎么使用HTML5中的Canvas绘制笑脸" ...
- 用java如何画动物_用画小狗的方法来解释Java值传递
笔者的个人博客 Bridge for You 已经上线,欢迎大家前去坐坐,喝茶侃大山! (这篇文章好像挺受欢迎的,借势给自己的个人网站做做宣传 ("'▽'")) 前言 在开始看我画 ...
- 使用HTML5中的canvas绘制灰太狼图像
大家好,我是byoneself,本次将为大家分享一下使用HTML5中的canvas绘制一个灰太狼图像,希望对大家有所帮助. 下图是效果图: 以下就是实现的代码: <!DOCTYPE html&g ...
- 在H5、微信小程序中使用canvas绘制二维码、分享海报
在H5.微信小程序中使用canvas绘制二维码.分享海报 文章目录 在H5.微信小程序中使用canvas绘制二维码.分享海报 前言 一.canvas绘制二维码 1.H5中使用canvas 2.微信小程 ...
- 小程序保存海报,canvas绘制然后保存到相册,canvas文字换行计算
一.小程序保存海报,canvas绘制然后保存到相册 1.wxml <view class="box-canvas"><canvas canvas-id='myCa ...
- 微信小程序微信头像使用canvas绘制失败问题开发工具正常真机不显示的解决方案
微信小程序微信头像使用canvas绘制失败问题开发工具正常真机不显示的解决方案 解决方案 我们的需求是动态生成一个含有微信头像的图片作为分享图片. 我们在页面中添加cancas <view st ...
最新文章
- 驰骋工作流引擎设计系列10时效考核规则设计
- 如何查看linux系统版本信息及CPU信息
- VS2008打包(含水晶报表)与安装注意事项
- 23中设计模式之抽象工厂模式
- linux 使cpu使用率升高_[Linux小技巧] 一行命令让CPU占用率达到100%
- flex 颜色16进制对照表
- PAYPAL使用虚拟信用卡验证的技巧
- SpringAOP原理分析
- centos6.5重置密码
- javaFX,Scene Builder引入Jfoenix
- Torus登场:CoreOS打造的新一代分布式存储系统
- python爬虫-个人记录
- 史上最长最恐怖的12個英文单词
- 架构演进|研究mvp到mvvm(传统架构mvvm和Jetpack下的区别)
- 小米手机刷机失败之小米La¥%¥Ji
- 沉思的片刻,我们都是哲学家
- 千万别在老家买房了,因为那儿通高铁
- mysql复合索引(联合索引)的使用场景
- NO.47-------线性回归分析经典案例(汽车价格预测)
- FL Studio21新版终于有内置的强大混响插件了