到目前为止，我们已经学会了很多Canvas的绘制方法，如果我们要绘制如下图的图形怎么办呢？
我们需要对矩形变形，使用坐标变换就足够了。但是对使用路径绘制出来的图形进行变幻的时候，那么要考虑的事情就 多了。因为使用坐标变换之后，已经创建好的路径就不可用了。必须要重新创建路径，重新创建路径后，坐标变换方法又失效了。
1、必须先另外绘制一个创建路径的函数。
2、在坐标变幻的同时调用该函数。
&!DOCTYPE&HTML&&&&&&&&&&&&&&&&http-equiv=&Content-Type&&content=&text/&charset=gb2312&&&&&&&&&&HTML5每日一练之Canvas标签的应用-坐标变换与路径结合使用&&&&&&&&&&&&&&&&&&type=&text/javascript&&&&&&&&&&window.onload&=&function()&&&&&&&&&{&&&&&&&&&&&&&&&&&&&&&&&&&createPic();&&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&//创建图形&&&&&&&&&&&&&&&&&function&createPic()&&&&&&&&&&&&&&&&&{&&&&&&&&&&&&&&&&&&&&&&&&&var&canvas&=&document.getElementById(&W3Cfuns_canvas&);&&&&&&&&&&&&&&&&&&&&&&&&&var&context&=&canvas.getContext(&2d&);&&&&&&&&&&&&&&&&&&&&&&&&&context.fillStyle&=&&#d4d4d4&;&&&&&&&&&&&&&&&&&&&&&&&&&context.fillRect(0,&0,&400,&300);&&&&&&&&&&&&&&&&&&&&&&&&&//绘制图形&&&&&&&&&&&&&&&&&&&&&&&&&context.translate(200,&50);&&&&&&&&&&&&&&&&&&&&&&&&&for(var&i&=&0;&i&&;&i++)&&&&&&&&&&&&&&&&&&&&&&&&&{&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&context.translate(25,&25);&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&context.scale(0.95,&0.95);&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&context.rotate(Math.PI&/&8);&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&createStar(context);//此方法专门绘制五角星&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&context.fill();&&&&&&&&&&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&//创建五角星的方法&&&&&&&&&&&&&&&&&function&createStar(c)&&&&&&&&&&&&&&&&&{&&&&&&&&&&&&&&&&&&&&&&&&&var&n&=&0;&&&&&&&&&&&&&&&&&&&&&&&&&var&dx&=&100;&&&&&&&&&&&&&&&&&&&&&&&&&var&dy&=&0;&&&&&&&&&&&&&&&&&&&&&&&&&var&s&=&50;&&&&&&&&&&&&&&&&&&&&&&&&&var&x&=&Math.sin(0);&&&&&&&&&&&&&&&&&&&&&&&&&var&y&=&Math.cos(0);&&&&&&&&&&&&&&&&&&&&&&&&&var&dig&=&Math.PI&/&5&*&4;&&&&&&&&&&&&&&&&&&&&&&&&&//创建路径&&&&&&&&&&&&&&&&&&&&&&&&&c.beginPath();&&&&&&&&&&&&&&&&&&&&&&&&&c.fillStyle&=&toRGB(parseInt(Math.random()*(255&-&0&+&1)&+&0),parseInt(Math.random()*(255&-&0&+&1)&+&0),parseInt(Math.random()*(255&-&0&+&1)&+&0));&&&&&&&&&&&&&&&&&&&&&&&&&for(var&i&=&0;&i&&;&i++)&&&&&&&&&&&&&&&&&&&&&&&&&{&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&x&=&Math.sin(i&*&dig);&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&y&=&Math.cos(i&*&dig);&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&c.lineTo(dx&+&x&*&s,&dy&+&y&*&s);&&&&&&&&&&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&&&&&&&&c.closePath();&&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&//小于10补零&&&&&&&&&&&&&&&&&function&addZero(string){return&string.length&==&2&?&string&:&'0'&+&}&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&//随即颜色&&&&&&&&&&&&&&&&&function&toRGB(redValue,&greenValue,&blueValue)&&&&&&&&&&&&&&&&&{&&&&&&&&&&&&&&&&&&&&&&&&&var&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&rgbR&=&addZero(redValue.toString(16),&2),&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&rgbG&=&addZero(greenValue.toString(16),&2),&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&rgbB&=&addZero(blueValue.toString(16),&2);&&&&&&&&&&&&&&&&&&&&&&&&&var&rgb&=&&#&&+&rgbR&+&rgbG&+&rgbB;&&&&&&&&&&&&&&&&&&&&&&&&&return&&&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&id=&W3Cfuns_canvas&&width=&400&&height=&300&&&&&&&&
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）fillRect(100,100,100,100) 前2个100是指坐标，后2个100是指宽和高。
今天学习html5 的canvas，发现fillRect的坐标和大小一直不对，研究了半天，发现canvas的宽度和高度必须内联在canvas标签中才对。郁闷了半天。
错误的方式1:
&!doctype html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Document&/title&
#mycanvas{
width: 200
height: 200
background:
&canvas id='mycanvas' &&/canvas&
var c = document.getElementById('mycanvas');
var ctx = c.getContext("2d");
ctx.fillStyle='#f36';
ctx.fillRect(100, 100, 100, 100);
错误的方式2：
&!doctype html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Document&/title&
&canvas id='mycanvas' style='width:200height:200background:yellow'&&/canvas&
var c = document.getElementById('mycanvas');
var ctx = c.getContext("2d");
ctx.fillStyle='#f36';
ctx.fillRect(100, 100, 100, 100);
显示结果：
正确的方式：
&!doctype html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Document&/title&
&canvas id='mycanvas' width='200px' height='200px' style='background:yellow'&&/canvas&
var c = document.getElementById('mycanvas');
var ctx = c.getContext("2d");
ctx.fillStyle='#f36';
ctx.fillRect(100, 100, 100, 100);
更多信息请查看
更多信息请查看
易贤网手机网站地址：
【】&&&&&【点此处查询各地各类考试咨询QQ号码及交流群】
由于各方面情况的不断调整与变化，易贤网所提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！
云南各地招聘
&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp会员注册
本站不参与评论，（&&点此深度交流 ）
自觉遵守：爱国、守法、自律、真实、文明的原则
尊重网上道德，遵守中华人民共和国各项有关法律法规
严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的评论
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
您在本站发表的评论，本站有权保留、转载、引用或者删除
参与本评论即表明您已经阅读并接受上述条款解决在canvas获取的坐标和窗口的坐标一样的问题-中国学网-中国IT综合门户网站
解决在canvas获取的坐标和窗口的坐标一样的问题
来源：互联网 发表时间： 22:46:46 责任编辑：李志喜字体：
& & &当用到鼠标事件的时候常要获取当前鼠标所在X，Y值，如果鼠标事件作用的是窗口对象时，获取鼠标的X,Y很简单，但当鼠标事件作用的是窗口里的一个对象的时候，就要考虑对象在窗口的位置。
& & & & &由于canvas对象的特殊性，在这里我要分析的是当鼠标事件作用在canvas对象中时，需要获取的X,Y的坐标的问题 。
& & & & &在这里需要用到一个方法：getBoundingClientRect()来获取canvas这个矩形对象，如需了解getBoundingClientRect()请看
& & & & &废话不多说coding...........
&!DOCTYPE html&
&meta charset=&utf-8&&
&title&&/title&
&script type=&text/javascript&&
function windowTocanvas(canvas, x, y) {
var bbox = canvas.getBoundingClientRect();
x: x - bbox.left * (canvas.width / bbox.width),
y: y - bbox.top * (canvas.height / bbox.height)
window.onload=function(){
var canvas=document.getElementById(&myCanvas&);
canvas.onclick=function(event){
var loc=windowTocanvas(canvas,event.clientX,event.clientY)
var x=parseInt(loc.x);
var y=parseInt(loc.y);
document.getElementById(&input_window&).value=event.clientX+&--&+event.clientY;
document.getElementById(&input_canvas&).value=x+&--&+y;
&div class=&& align=&center&style=&position: z-index: 1; top: 100 left: 100&&
&canvas id=&myCanvas& style=&border: 1px solid #000000;& height=&300px& width=&600px&&
&div class=&&align=&center&style=&position: z-index: 1; top: 30 left: 100&&
点击获取窗口的X，Y值：&input type=&text& id=&input_window& value=&& /& &br /&
点击获取canvas的X，Y值：&input type=&text& id=&input_canvas& value=&& /&
相关文章：
上一篇文章：下一篇文章：
最新添加资讯
24小时热门资讯
Copyright © 2004- All Rights Reserved. 中国学网 版权所有
京ICP备号-1 京公网安备02号}