JavaScript基础使用Canvas绘图.docx
- 文档编号:2840584
- 上传时间:2022-11-15
- 格式:DOCX
- 页数:17
- 大小:18.24KB
JavaScript基础使用Canvas绘图.docx
《JavaScript基础使用Canvas绘图.docx》由会员分享,可在线阅读,更多相关《JavaScript基础使用Canvas绘图.docx(17页珍藏版)》请在冰豆网上搜索。
JavaScript基础使用Canvas绘图
JavaScript基础——使用Canvas绘图
作者:
A_山水子农字体:
[增加减小]类型:
转载时间:
2016-11-02我要评论
这篇文章主要介绍了JavaScript基础——使用Canvas绘图,Canvas也真的跟现实生活中的画布非常相似,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
最近在学习Canvas画图的方法,最近有时间做了个整理,
1、基本用法
要使用
例如:
使用toDataURL()方法,可以导出在
vardrawing=document.getElementById("drawing");
//确定浏览器支持
if(drawing.getContext){
//取得绘图上下文对象的引用,“2d”是取得2D上下文对象
varcontext=drawing.getContext("2d");
//取得图像的数据URI
varimgURI=drawing.toDataURL("image/png");
alert(imgURI);
//显示图像
varimage=document.createElement("img");
image.src=imgURI;
document.body.appendChild(image);
}
2、2D上下文
(1)、填充和描边
填充:
用指定的样式填充图形;描边:
就是只在图形的边缘画线。
fillStyle和strokeStyle两个属性的值可以是字符串、渐变对象或模式对象。
vardrawing=document.getElementById("drawing");
//确定浏览器支持
if(drawing.getContext){
//取得绘图上下文对象的引用,“2d”是取得2D上下文对象
varcontext=drawing.getContext("2d");
14px;">//此程序由于没有图像,填充和描边不会显示 context.strokeStyle="#0000ff"; context.fillStyle="red"; } (2)、绘制矩形 矩形是唯一一种可以直接在2D上下文绘制的形状。 与矩形有关的方法包括: fillRec()、strokeRect()和clearRect()。 这三个方法都能接收4个参数: x坐标、y坐标、宽度和高度。 DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> //www.w3.org/1999/xhtml">
#0F0solid1px">ADrawingofsomething vardrawing=document.getElementById("drawing"); //确定浏览器支持 if(drawing.getContext){ //取得绘图上下文对象的引用,“2d”是取得2D上下文对象 varcontext=drawing.getContext("2d"); //绘制红色矩形 context.fillStyle="red"; context.fillRect(10,10,50,50); //绘制半透明的蓝色矩形 context.fillStyle="rgba(0,0,255,0.5)"; context.fillRect(30,30,50,50); //绘制红色描边矩形 context.strokeStyle="red"; context.strokeRect(10,90,50,50); //绘制半透明的蓝色描边矩形 context.strokeStyle="rgba(0,0,255,0.5)"; context.strokeRect(30,120,50,50); //在两个矩形重叠的地方清除一个小矩形 context.clearRect(30,30,30,30); }